element-UI的table如何实现固定表头和第一行

在 Element-UI 的 table 组件中，可以通过设置 `height` 和 `max-height` 来实现表格的固定高度。同时，通过设置 `fixed` 属性可以实现表头固定。要同时实现第一行固定，可以使用 `append` slot，将第一行作为 table 的子组件插入到 table 中，并设置其样式为固定位置。

具体实现可以参考以下代码：

<template>
  <el-table
    :data="tableData"
    :height="tableHeight"
    max-height="500px"
    :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#333', 'font-weight': 'bold' }"
    :row-class-name="tableRowClassName"
    fixed
  >
    <template slot="append">
      <el-table-column
        v-for="(item, index) in tableData[0]"
        :key="index"
        :label="index === 0 ? '' : item"
        :width="index === 0 ? '50px' : '100px'"
        :fixed="index === 0"
        class-name="first-column"
      >
        <template slot-scope="{ row }">
          <div v-if="index === 0">{{ row[0] }}</div>
          <div v-else>{{ row[index] }}</div>
        </template>
      </el-table-column>
    </template>
    <el-table-column
      v-for="(item, index) in tableData[0]"
      :key="index"
      :prop="index === 0 ? 'id' : item"
      :label="index === 0 ? 'ID' : item"
      :width="index === 0 ? '50px' : '100px'"
      :fixed="index === 0"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ['ID', 'Name', 'Age', 'Gender', 'Address'],
        ['1', 'John', '20', 'Male', 'New York'],
        ['2', 'Mary', '25', 'Female', 'Los Angeles'],
        ['3', 'Tom', '30', 'Male', 'Chicago'],
        ['4', 'Lucy', '35', 'Female', 'Houston'],
        ['5', 'David', '40', 'Male', 'Philadelphia']
      ]
    }
  },
  computed: {
    tableHeight() {
      const headerHeight = document.querySelector('.el-table__header-wrapper').offsetHeight
      const appendHeight = document.querySelector('.el-table__append-wrapper').offsetHeight
      return `calc(100vh - ${headerHeight + appendHeight}px)`
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 0) {
        return 'first-row'
      }
    }
  }
}
</script>

<style scoped>
.el-table__header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
}

.el-table__append-wrapper {
  position: sticky;
  top: 40px;
  z-index: 1;
}

.first-row {
  position: sticky;
  top: 40px;
  z-index: 1;
}

.first-column {
  text-align: center;
}
</style>

在上面的代码中，我们通过 `append` slot 将第一行作为子组件插入到 table 中，并设置其样式为 `position: sticky; top: 40px;` 实现第一行固定。同时，设置了表头和第一列的 `fixed` 属性，实现表头和第一列固定。为了使表格高度能够自适应页面高度，我们通过计算表头和第一行的高度，来动态设置表格的高度。