fixed columns in elementui tables

前端

2024-01-10 19:51:31

当你想找到一个似乎在互联网上无处可寻的问题的答案时，你会怎么做？当然，你会尝试在百度上搜索！但是，如果连百度都无法为你提供你正在寻找的答案怎么办？

这就是我试图弄清楚如何在 Element UI 中修复表格的前 n 列时所发生的事情。我搜索了互联网，但我所能找到的只是含糊且无用的建议。

不过别担心，我不会让你悬着。在这篇博文中，我将向你确切展示如何在 Element UI 中修复表格的前 n 列。

问题：

当你有具有多个级别的复杂表格标题，并且你想修复表格的前 n 列时，就会出现问题。这很难实现，因为 Element UI 的表格组件没有内置功能来修复列。

解决方案：

要修复 Element UI 中表格的前 n 列，你可以结合使用 CSS 和 JavaScript。以下是步骤：

1. 将以下 CSS 添加到你的项目中：

.el-table--fixed {
  width: calc(100% - 17px);
}

.el-table__fixed-header-wrapper {
  left: 0;
}

.el-table__fixed-body-wrapper {
  left: 0;
}

此 CSS 将创建一个固定表格，其宽度基于表格宽度减去 17 像素。这 17 像素是为了计算滚动条的宽度。

2. 将以下 JavaScript 添加到你的项目中：

mounted() {
  this.$nextTick(() => {
    const headerWrapper = this.$refs.headerWrapper;
    const bodyWrapper = this.$refs.bodyWrapper;

    const fixedColumns = this.fixedColumns;

    const headerFixedColumns = headerWrapper.querySelectorAll('.el-table__header-cell:nth-child(-n+' + fixedColumns + ')');
    const bodyFixedColumns = bodyWrapper.querySelectorAll('.el-table__body-cell:nth-child(-n+' + fixedColumns + ')');

    headerFixedColumns.forEach((column) => {
      column.classList.add('el-table__fixed-column');
    });

    bodyFixedColumns.forEach((column) => {
      column.classList.add('el-table__fixed-column');
    });
  });
}