vue中elementui表格错位问题解决(一次到位)

引入element-resize-detector

在项目引入插件(用来监听元素宽度变化)

npm install element-resize-detector --save

在文件中引入(写在script中,export default{}外面)

let elementResizeDetectorMaker = require("element-resize-detector");

在mounted中写入

let _this = this;
let listenTable = this.$refs.refTable.querySelector(
      ".el-table__body-wrapper .el-table__body"
    );
    erd.listenTo(listenTable, function() {
      _this.$refs.refTable.doLayout();
    });

refTable为el-table元素中绑定的ref值

题外话

可能有人会说，那我不是需要在每个页面上去写上述方法吗?，答案是不需要的，将表格封装成组件，只需在组件中写一遍即可。

网上有些内容是在获取数据接口后调用doLayout方法，或者改变表格宽度如：首先给宽度为100%，渲染数据后在吧宽度给为99%。也可行，但是当你拖动浏览器宽度时或者显示隐藏后就有几率会错位，而且每次获取数据后调用方法，重复工作量挺大的。不想偷懒的程序员不是好程序员