返回

vue3 element-plus el-table实现表头冻结、表头吸顶的简单方法

前端

el-table 表头冻结和吸顶：终极指南

在数据密集型应用程序中，管理海量数据时，el-table 组件提供的表头冻结和吸顶功能至关重要。通过冻结表头，您可以在滚动表格时保持表头可见，而通过吸顶表头，您可以在滚动页面时保持表头可见。

实现步骤

1. 导入脚本文件

从 Element Plus 官网下载脚本文件，或直接从 CDN 中复制。在 Vue 3 中，通过在 main.js 中引用脚本文件：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

Vue.use(ElementPlus)

2. 设置固定列

通过 fixed 属性设置固定列。该属性可以设置为 left、right 或 both。例如，要将前两列固定在左边：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" fixed="left"></el-table-column>
  <el-table-column prop="age" label="年龄" fixed="left"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

3. 实现表头吸顶

通过 sticky 属性实现表头吸顶。该属性可以设置为 true 或 false：

<el-table :data="tableData" :sticky="true">
  <el-table-column prop="name" label="姓名" fixed="left"></el-table-column>
  <el-table-column prop="age" label="年龄" fixed="left"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

代码示例

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" fixed="left"></el-table-column>
  <el-table-column prop="age" label="年龄" fixed="left"></el-table-column>
  <el-table-column prop="address" label="地址" width="300"></el-table-column>
</el-table>

const tableData = [
  {
    name: 'John',
    age: 30,
    address: '123 Main Street'
  },
  {
    name: 'Jane',
    age: 25,
    address: '456 Oak Avenue'
  },
  // ... more data
]

常见问题解答

  1. 表头吸顶在哪些浏览器中支持？
    答：所有主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。

  2. 如何同时冻结和吸顶表头？
    答：同时设置 fixed 和 sticky 属性。

  3. 冻结的表头可以调整大小吗？
    答：是的，可以使用 resizable 属性。

  4. 表头吸顶会影响表格的性能吗？
    答：一般情况下不会，但在大数据集中可能会造成一些影响。

  5. 如何在滚动时保持表头可见和吸顶？
    答：使用 scrollY 属性设置表格的可滚动高度。