VUE表格显示错位的两种解决思路
两种思路解决vue表格显示错乱问题
·
现在在写的一个项目出现了表格显示错位的问题,如图所示,虽然不影响功能,刷新一下就没了,但是还是挺影响美观的。
可以看见图中有两个错位问题,第一个是滚动条没有在正常的位置,第二个是第一行数据中左右fixed的部分出现在了表格中间。
第一个思路
当然是使用dolayout()
我在调用数据接口之后和在watch里都加了dolayout()函数
watch: {
List: {//这里是表格的名字
// 解决表格显示错位问题
handler () {
this.$nextTick(() => {
this.$refs.el_table.doLayout()
})
},
deep: true
}
这个方法对大部分情况适用,但并没有解决我的问题。
第二个思路
可以看见错位的滚动条所在叫做 .el-table__body-wrapper
对比可以发现,正常时的 .el-table__body-wrapper的height应该是520px,而错位时height是406px,整个table的height是570px。
解决方法
所以一种方便快速永诀后患的思路就是在css里直接规定.el-table__body-wrapper的height,当然这里有一点要注意,要在前面加一个/deep/,因为这个元素是一个深层元素。
/deep/ .el-table__body-wrapper{
height: 91.40% !important;
}
我直接将它的高度设定为表格高度的90%左右
固定列显示错位也是同样的思路
/deep/ .el-table__fixed-body-wrapper{
height: 91.22% !important;
}
供大家参考,有不足之处欢迎在评论区一起讨论。
更多推荐
已为社区贡献1条内容
所有评论(0)