element-ui el-table表格固定表头代码示例

在使用element-ui的el-table组件时，固定表头是一个常见的需求，特别是当表格内容较多时。以下是固定表头的一个基本示例代码：

<template>
  <el-table :data="tableData" style="width: 100%" height="300px">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
    <el-table-column prop="name" label="姓名" width="150"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        // ... 更多数据
      ],
    };
  },
};
</script>

在这个示例中，el-table组件通过设置height属性来固定表头。:height="300px"表示表格的高度为300像素，这样即使表格内容超出了这个高度，表头也会固定在顶部。

请注意，这个示例假设你已经在你的Vue项目中安装并配置了element-ui。如果你还没有安装element-ui，你可以通过npm或yarn来安装它：

npm install element-ui --save
# 或者
yarn add element-ui

然后，在你的Vue组件中导入并使用el-table和el-table-column组件。

如果你需要固定列，可以使用fixed属性，例如：

<el-table-column prop="date" label="日期" width="150" fixed></el-table-column>

这将固定“日期”这一列在左侧。你可以根据需要调整fixed属性的值，例如fixed="right"来固定在右侧。