el-table序号列固定,为什么刷新时和其他列会错开
时间: 2024-10-09 21:14:05 浏览: 76
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
当您在Vue的Element UI库中的`el-table`组件中设置序号列固定(`fixed`)时,如果表格数据发生变化并触发了页面刷新(比如通过API获取新的数据),由于`el-table`默认会按照初次渲染的数据顺序来计算列的位置,所以固定列可能会因为新数据的排列改变而相对于非固定列错位。
这是因为固定列是基于静态位置布局的,而动态数据导致的列顺序调整并未考虑到已固定的列。解决这个问题的一种常见做法是在数据加载完成后手动调整固定列的索引或位置,使其回到预期的位置。你可以通过监听`data`变化后的`updated`事件,并更新表头的`row-key`属性来确保排序正确。
例如:
```javascript
this.$nextTick(() => {
this.tableHeader.forEach((col, index) => {
if (col.fixed) {
// 如果当前列是固定的,更新其索引以保持原位置
this.$set(this.tableColumns, index, col);
}
});
});
```
阅读全文