关于el-table开发时的一些常见问题(待更新)

月亮慢慢圆2025-04-27 15:51

我们在使用饿了么组件的时候经常经常经常会用到el-table组件，所以会经常遇到一些问题，这个帖子统计了我工作到现在目前为止觉得出现比较频繁的一些问题或者使用。

1.使用fixed以后拖不动横向滚动条

我们使用fixed属性使列固定的时候，会发现固定列下方的横向滚动条是拖不动的，但是我们只要加上一个css以后就可以了。

less 复制代码

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}

这应该是遇到最多的场景了，毕竟经常会出现表头很多，需要在拖动横向滚动条的时候让某一列固定住的情况。

我们在使用v-if去动态的切换表头的时候会发现表头会闪烁一下，这会导致用户体验不佳，其实表头闪烁的原因也很简单，这是因为表格在渲染额时候要重新计算表头的高度，我们只需要给表头高度给固定死就好了。

less 复制代码

::v-deep .el-table .el-table__header-wrapper .cell {
  height: 23px !important;
}