Vue elementUI table表格列错位/滑动后切换每页显示数后错位/表格使用fixed后错位...【解决】

2024-02-06 08:47:56

纠正 Vue elementUI 表格中错位的列：全面的指南

在构建 Vue elementUI 表格时，可能会遇到列错位的问题，这会影响用户体验并阻碍数据的准确查看。本指南将深入探讨导致此问题的常见原因，并提供高效的解决方案，确保您的表格始终准确无误地呈现。

问题 1：切换每页显示数后列错位

当更改表格中每页显示的记录数时，列可能会错位。这是因为表格需要重新渲染以适应新的数据配置。

解决方案：使用 :key 属性

要解决此问题，为表格的每一行添加一个唯一的 :key 属性。这将确保在重新渲染时保持行的顺序，从而消除列错位。

<template>
  <el-table :data="tableData" :key="row => row.id">
    ...
  </el-table>
</template>

问题 2：滑动后列错位

水平滑动表格时，列可能会错位，尤其是当固定列存在时。这是因为固定列没有正确更新其位置。

解决方案：使用 :style 属性

通过在固定列上使用 :style 属性并设置 left 属性，可以确保固定列在滚动时保持其位置。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column :fixed="true" :style="{ left: fixedColumnWidth + 'px' }">
      ...
    </el-table-column>
    ...
  </el-table>
</template>

问题 3：表格使用 fixed 后列错位

当使用 fixed 属性固定表格时，列可能会错位，这是由于固定列的宽度未正确计算。

解决方案：计算固定列宽度

要解决此问题，需要计算固定列的宽度，并将其传递给 :style 属性的 left 属性。

const fixedColumnWidth = calculateFixedColumnWidth();

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column :fixed="true" :style="{ left: fixedColumnWidth + 'px' }">
      ...
    </el-table-column>
    ...
  </el-table>
</template>