element-ui的表格错位问题,只出现在带有设置了fixed的列的el-table中,这是一个渲染机制的问题,通过调用一遍doLayout方法就可以解决。但是套在el-tabs里的el-table,就是另一种情况了。
简单错位
这是我瞎起的名字,我想指代的是在重新渲染数据或者改变浏览器窗口尺寸(resize)造成的那种fixed列的错位。
这个问题很好解决了,给你的el-table标签加上ref属性,例如ref='tableRef'
,然后在触发了错位的地方比如重新查询数据、或监听resize事件的回调里执行:
this.$nextTick(()=>{
this.$refs.table.doLayout()
})
到这里基本就可以解决常见的错位问题了,如果情况特殊$nextTick不起作用,用setTimeout试一下即可。
ps:据我观察,有横向滚动条的fixed表格是不会产生错位问题的,这还有待验证。
接着就碰到了新的情况,那就是我命名的奇葩错位了。
奇葩错位
在el-tabs里已经doLayout处理过的table,在切换标签页的时候,又错位了。
简单,在切换标签页的监听事件里再执行一次doLayout不就完了么,现实是,fixed列做了一个过渡动画动作才于主体部分对齐,让强迫症非常不开心。
经过多方面的测试,最终发现罪魁祸首就是
<el-table-column
prop="name"
label="姓名测试"
min-width="70">
</el-table-column>
里边的这个min-width
值!
那么解决el-table里所有错位问题的方法,其实就是,根据label值的长度调整min-width,min-width过小就会导致各种奇葩的错位,例如上边这个四个字的label,min-width="70"
就会出现错位现象,设为80就没有问题了。
总结就是,根据表头文字长度、给有min-width的列设置合适的值,错位问题就解决了。至于这个问题的产生机制,有时间再去整理讨论吧。