如何实现elementui中的表格固定第一行标题，内容滚动

要实现 element-ui 中的表格固定第一行标题，内容滚动，可以使用 el-table 组件的 slot-scope 和 el-scrollbar 组件的滚动条功能。

以下是实现步骤：

1. 在 template 中使用 el-table 组件，并设置表格的样式和高度。

<el-table :data="tableData" style="width: 100%" height="300">
  <!-- 表格列定义 -->
</el-table>

2. 在表格中使用 slot-scope="scope"，获取表格数据和表格列信息。

<el-table :data="tableData" style="width: 100%" height="300">
  <template slot-scope="scope">
    <tr>
      <th v-for="item in scope.columns" :key="item.label">
        {{ item.label }}
      </th>
    </tr>
    <tr v-for="item in scope.data" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.address }}</td>
      <!-- 其他表格列定义 -->
    </tr>
  </template>
</el-table>

3. 在表格外部包裹一个带有滚动条的容器，例如 el-scrollbar 组件。

<el-scrollbar style="height: 300px;">
  <el-table :data="tableData" style="width: 100%" height="300">
    <!-- 表格列定义 -->
  </el-table>
</el-scrollbar>

4. 在表格容器上设置 overflow-y: auto，使其在容器高度内部滚动。

.el-table__body-wrapper {
  overflow-y: auto;
}

5. 在表格容器上设置 max-height，使其高度不超过容器高度，从而触发滚动条。

.el-table__body-wrapper {
  max-height: 300px;
  overflow-y: auto;
}

6. 在表格头部上方添加一个固定的表格行，显示表格列标题。

<el-scrollbar style="height: 300px;">
  <el-table :data="tableData" style="width: 100%" height="300">
    <template slot-scope="scope">
      <tr>
        <th v-for="item in scope.columns" :key="item.label">
          {{ item.label }}
        </th>
      </tr>
      <tr v-for="item in scope.data" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.address }}</td>
        <!-- 其他表格列定义 -->
      </tr>
    </template>
    <template slot="header">
      <tr>
        <th v-for="item in tableData[0]" :key="item">{{ item }}</th>
      </tr>
    </template>
  </el-table>
</el-scrollbar>

这样，就可以实现 element-ui 中的表格固定第一行标题，内容滚动了。当表格数据较多时，表格头部的列标题会固定在页面顶部，表格内容可以通过滚动条滚动。同时，滚动条会出现在表格容器中，用户可以通过滚动条滚动表格内容。