自动吸顶令你眼前一亮，element-ui 的 el-table 表头也能变得那么实用！

2023-01-03 16:18:11

让 el-table 表头更上一层楼：自动吸顶

在数据驱动的时代，表格已成为我们工作和生活中必不可少的工具。element-ui 的 el-table 凭借其强大的功能深受开发者的喜爱。然而，当表格数据量大时，表头会随着页面滚动而消失，带来不便。

自动吸顶：解决表头消失难题

为了解决这一问题，我们可以通过 CSS 代码实现表头自动吸顶的功能。只需要在 style 标签中添加如下代码：

.el-table__header {
  position: sticky;
  top: 0px;
}

添加此代码后，表头栏将固定在页面顶部，并随着页面的滚动而移动。您可以根据需要调整 top：0px 的值，以获得最佳视觉效果。

操作步骤：轻松上手

引入 element-ui 的 CSS 和 JavaScript 文件。
在 CSS 文件中添加上述代码。
在 JavaScript 文件中使用 el-table 组件创建表格。
运行项目，即可看到表头自动吸顶的效果。

代码示例：一目了然

以下是一个完整的代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  </head>
  <body>
    <div id="app">
      <el-table :data="tableData">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            tableData: [
              {
                name: "John Doe",
                age: 30,
                address: "123 Main Street",
              },
              {
                name: "Jane Doe",
                age: 25,
                address: "456 Elm Street",
              },
              {
                name: "John Smith",
                age: 40,
                address: "789 Oak Street",
              },
            ],
          };
        },
      });
    </script>
    <style>
      .el-table__header {
        position: sticky;
        top: 0px;
      }
    </style>
  </body>
</html>