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%。也可行，但是當你拖動瀏覽器寬度時或者顯示隱藏后就有幾率會錯位，而且每次獲取數據后調用方法，重復工作量挺大的。不想偷懶的程序員不是好程序員