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;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。