本文记录一个实际开发中
pl-table
的问题,项目比较老,vue
还是2.x版本。pl-table
是基于el-table
改造过来的表格展示组件,已经停止更新。
问题描述
- 当
data
内数据动态改变时,pl-table
的表头部分,列的文字会左右抖动。如果只是打开关闭弹框这样的场景,data
对应的变量只会在打开弹框或关闭弹框变化一次,也就是pl-table
的表头文字只在打开关闭弹框瞬间抖动一次。但是某次需求是,在弹框中加入倒计时功能,data
中的倒计时变量每隔一秒变化一次,导致pl-table
的表头文字每秒都在抖动。
解决办法
javascript
beforeUpdate() {
this.$nextTick(() => {
this.$refs.el_table.doLayout() // el_table: el-table 的 ref 名
})
},
- 既然
pl-table
其实也是el-table
改的,表头文字抖动问题也是共性。 - 只需在
beforeUpdate
生命周期中,nextTick
任务中,对el-table
的ref
对象使用doLayout()
方法即可。