element-ui el-table 固定表头

在 Element UI 的 el-table 组件中，要实现固定表头，你需要使用 height 属性来设置表格的高度，并且将 max-height 设置为一个较大的值（或者不设置，因为默认是无限制的）。此外，你还需要设置 fixed 属性在 el-table-column 上，以使得某个列（或多个列）固定。

下面是一个简单的例子，展示了如何固定表头和列：

<template>
  <el-table :data="tableData" height="200" border style="width: 100%">
    <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="province" label="省份" width="120"></el-table-column>
    <el-table-column prop="city" label="市区" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" width="300"></el-table-column>
    <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 填充数据
      ]
    }
  }
}
</script>

在这个例子中，表格的高度被设置为200px，这将导致垂直滚动条的出现，从而固定表头。注意，固定列 fixed 属性仅在表格有 height 属性时才会生效。