Vue3+Element Plus完美解决el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号问题

2023-05-14 07:09:58

使用 Vue3 + Element Plus 解决 el-table 的常见问题

简介

在使用 Vue3 搭配 Element Plus 构建表格组件（el-table）时，你可能会遇到一些常见问题。这些问题可能会影响表格的显示、滚动行为以及固定列的稳定性。本文将深入探讨这些问题并提供详细的解决方案，帮助你打造无缝的表格体验。

问题 1：固定列无法正常固定

症状： 当表格出现滚动条时，固定列（fixed）无法保持固定，而是随着表格一起滚动。

解决方案： 要使固定列正常工作，需要在 el-table 的父容器中设置 overflow: auto，并确保 fixed 属性指定了需要固定的列。

<div style="overflow: auto;">
  <el-table :data="tableData" :fixed="fixedColumns">
    <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>

问题 2：表头内容超出时不显示省略号

症状： 当表头内容超出表格的宽度时，它不会自动隐藏并显示省略号，导致表头内容显示不完整。

解决方案： 要启用省略号功能，需要在 el-table-column 中设置 show-overflow-tooltip 属性为 true。

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

问题 3：大数据量下固定列抖动

症状： 当表格包含大量数据时，固定列在滚动时会出现抖动现象。

解决方案： 为了优化大数据量的显示，可以在 el-table 中设置 tree-props 属性，指定 rowKey 和 children 属性，这将以树形结构渲染数据，减少抖动。

<el-table :data="tableData" :tree-props="{ rowKey: 'id', children: 'children' }">
  <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>