庖丁解牛：解决 Element UI 表格固定列横滚拖动难题

2023-11-25 17:28:13

在 Element UI 的表格组件中，固定列在数据延迟加载时横滚无法拖动，这让人苦恼不已。本文将深入剖析这一难题，提供一劳永逸的解决方案。

洞察难题的症结所在

问题的根源在于 Element UI 表格组件的默认行为。在数据延迟加载时，表格会动态调整其高度。然而，固定列却无法适应这种变化，导致横滚拖动功能失效。

巧解之道：自定义滚动条

为了解决这个问题，我们需要自定义滚动条的行为。为此，我们可以在表格容器上添加以下 CSS 样式：

.el-table-wrapper {
  overflow-x: scroll;
}

这将启用水平滚动条，并允许我们在数据加载后手动调整固定列的宽度。

步骤分解：实现解决方案

1. 启用滚动条

在你的 Vue 应用程序中，将以下代码添加到表格组件的容器元素：

<div class="el-table-wrapper" style="overflow-x: scroll;">
  <el-table :data="tableData" :fixed="fixedColumns"></el-table>
</div>

2. 动态调整固定列宽度

在数据加载完成后，使用 JavaScript 动态调整固定列的宽度。以下是一个示例：

// 假设 fixedColumns 是一个包含固定列名称的数组
const tableWidth = document.querySelector('.el-table-wrapper').offsetWidth;
fixedColumns.forEach((column) => {
  const columnWidth = document.querySelector(`.el-table__fixed-column--${column}`).offsetWidth;
  document.querySelector(`.el-table__fixed`).style.width = `${tableWidth - columnWidth}px`;
});