固定表头数据表

固定表头数据表是一种常见的 UI 组件，它能够在页面滚动时，保持表头固定不变，从而方便用户查看和操作表格数据。现在，大多数流行的前端框架都内置了固定表头数据表的功能，例如 Bootstrap、ElementUI、Ant Design 等。

在本文中，我们将介绍如何使用 Vue.js 和 ElementUI 组件库来实现一个固定表头数据表。

步骤一：安装 ElementUI

首先，我们需要安装 ElementUI。在 Vue.js 项目中使用 ElementUI 非常简单，只需要在命令行中运行以下命令即可：

npm install element-ui --save

步骤二：引入 ElementUI 组件

在我们的 Vue.js 组件中，我们需要引入以下 ElementUI 组件：

• el-table：用于渲染表格数据。
• el-table-column：用于定义表格的列。
• el-scrollbar：用于包裹表格的滚动条。

在组件的 <template> 标签中，我们可以这样写代码：

<template>
  <div class="fixed-table">
    <el-table :data="tableData" style="width: 100%" height="300px">
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="age" label="Age" width="80"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-scrollbar wrap-class="table-scroll-wrap"></el-scrollbar>
  </div>
</template>

这段代码中，我们使用 <el-table> 组件显示表格数据，使用 <el-table-column> 组件定义表格列。此外，我们还使用了 <el-scrollbar> 包裹滚动条，并为其添加了一个样式类 table-scroll-wrap，用于对其进行样式定制。

步骤三：添加 CSS 样式

在我们的组件中，我们需要使用 CSS 样式来实现表格的固定表头。以下是一个示例 CSS 样式：

<style>
  .fixed-table {
    position: relative;
  }
  .fixed-table .el-table {
    position: relative;
    z-index: 1;
  }
  .fixed-table .el-scrollbar__wrap {
    height: 300px;
    overflow-y: auto;
  }
  .table-scroll-wrap {
    padding-right: 17px;
  }
  .table-scroll-wrap .el-table__header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 17px);
    z-index: 2;
  }
  .table-scroll-wrap .el-table__body-wrapper {
    margin-top: 40px;
  }
  .table-scroll-wrap .el-table__body {
    overflow: hidden;
    overflow-y: auto;
    height: 300px;
  }
</style>

在这个样式表中，我们为包裹表格的 <div> 元素添加了一个 position: relative 样式，为了确保其内部的子元素（包括表格和滚动条）能够正常地按照其自身位置进行布局。

我们还为表格实现了以下 CSS 样式：

• position: relative 和 z-index: 1：为了确保表格的层级关系正确。
• position: absolute、top: 0 和 left: 0：为了让表头固定在页面顶部。
• width: calc(100% - 17px)：为了让表头的宽度与表体保持一致，并因为滚动条占用了 17px。
• margin-top: 40px：为了为表格添加一个顶部空白间隙，避免表头被切断。
• overflow: hidden 和 overflow-y: auto：为了将表格的垂直滚动条隐藏。

步骤四：完整代码

为了帮助读者更好地理解，以下是一个完整的 Vue.js 组件，其中包含了完整的 HTML、CSS 和 JavaScript 代码。

<template>
  <div class="fixed-table">
    <el-table :data="tableData" style="width: 100%" height="300px">
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="age" label="Age" width="80"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-scrollbar wrap-class="table-scroll-wrap"></el-scrollbar>
  </div>
</template>

<script>
  export default {
    name: "FixedTable",
    data() {
      return {
        tableData: [
          { name: "Tom", age: 19, address: "Shanghai" },
          { name: "Jerry", age: 20, address: "Beijing" },
          { name: "Peter", age: 25, address: "Guangzhou" },
          { name: "Mike", age: 30, address: "Shenzhen" },
          { name: "John", age: 35, address: "Hangzhou" },
          { name: "Lucy", age: 40, address: "Nanjing" },
          { name: "Lily", age: 45, address: "Chengdu" },
          { name: "Jack", age: 50, address: "Chongqing" },
          { name: "Rose", age: 55, address: "Wuhan" },
          { name: "Eric", age: 60, address: "Xi'an" },
          { name: "Peter", age: 65, address: "Taipei" },
          { name: "David", age: 70, address: "Hong Kong" }
        ]
      };
    }
  };
</script>

<style>
  .fixed-table {
    position: relative;
  }
  .fixed-table .el-table {
    position: relative;
    z-index: 1;
  }
  .fixed-table .el-scrollbar__wrap {
    height: 300px;
    overflow-y: auto;
  }
  .table-scroll-wrap {
    padding-right: 17px;
  }
  .table-scroll-wrap .el-table__header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 17px);
    z-index: 2;
  }
  .table-scroll-wrap .el-table__body-wrapper {
    margin-top: 40px;
  }
  .table-scroll-wrap .el-table__body {
    overflow: hidden;
    overflow-y: auto;
    height: 300px;
  }
</style>

这个组件中包含了一个名为 FixedTable 的 Vue.js 组件，其中包含了一个具有固定表头的表格组件。

总结

固定表头数据表是一种常见的 UI 组件，在现代的 Web 应用程序中得到广泛应用。在本文中，我们介绍了如何使用 Vue.js 和 ElementUI 组件库来实现一个固定表头数据表。通过这个示例代码，读者不仅可以学习如何实现一个固定表头数据表，还可以了解一些关于 Vue.js 和 ElementUI 的基础知识。