element-ui中的el-table表头错位

一般情况下,遇到表头错位,只需要采用以下方法解决就行了:

watch: {
    // tableData是el-table绑定的数据
      tableData: {
        handler() {
          this.$nextTick(() => {
            // tableRef是el-table绑定的ref属性值
            this.$refs.tableRef.doLayout()
          })
        },
        deep: true,
      }
  }
<style lang="scss" scoped>
  /deep/ .el-table th.gutter {
    width: 0px !important;
    display: table-cell !important;
  }
</style>

至于,为什么要使用nextTick,是因为watch会在updated生命周期函数之前执行,也就意味着数据还未更新,这时候对 Table 进行重新布局,计算会不准确。

今天开发的时候,遇到测试提的一个很奇葩的关于el-table的缺陷,当我们对屏幕进行了放大之后,原本没问题的el-table会出现表头错位,也是这样解决的。


1637228111(1).png

如有错误,欢迎指正!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容