vue表格如何实现固定表头

要实现固定表头，可以使用`<table>`的`<thead>`和`<tbody>`标签，将表头和表格内容分开。然后使用CSS的`position:fixed`属性使表头固定在页面的顶部。

下面是一个基本的示例代码：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
        <td>Cell 1-3</td>
      </tr>
      <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
        <td>Cell 2-3</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

接下来是CSS样式：

.table-container {
  overflow-y: scroll;
  max-height: 300px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f9f9f9;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

th {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

tbody {
  display: block;
  margin-top: 40px;
}

td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

这里使用了一个包含`<table>`的容器`<div>`，并设置了最大高度和滚动条，以防止表格内容过长。`<thead>`的位置被设置为固定，使其始终保持在页面的顶部。`<tbody>`的`display`属性被设置为`block`，并在顶部留出了一个与表头高度相同的空白区域，以防止表格内容被表头覆盖。