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%。也可行,但是当你拖动浏览器宽度时或者显示隐藏后就有几率会错位,而且每次获取数据后调用方法,重复工作量挺大的。不想偷懒的程序员不是好程序员