vue解决el-table表格中表头与内容错位问题

1、问题描述

• 场景1：当el-table里的内容比较多的时候，table会出现纵向滚动条导致错位。如下图。
• 场景2：el-table表格列固定左右滑动导致错位。

2、解决方法

直接在请求数据后执行表格自带属性doLayout方法重新加载table，即可解决错位问题。

使用方法如下：

// ElTableHeaderRef是 el-table 标签里添加的 ref="ElTableHeaderRef"
this.$nextTick(() => {
    if (this.$refs.ElTableHeaderRef && this.$refs.ElTableHeaderRef.doLayout) {
        this.$refs.ElTableHeaderRef.doLayout();
    };
});

---

完整代码如下： 

<el-table ref="ElTableHeaderRef" border  :data="tableData">
    <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
    <el-table-column  prop="stationname" label="基站名称" show-overflow-tooltip  align="center"></el-table-column>
</el-table>

getTableData() {
            getstationlist(this.searchFrom).then(res => {
                this.tableData = res.rows;
                this.total = res.total;
                this.$nextTick(() => {
                    if (this.$refs.ElTableHeaderRef && this.$refs.ElTableHeaderRef.doLayout) {
                        this.$refs.ElTableHeaderRef.doLayout();
                    };
                });
            }).catch(err => { });
}

3、展示效果

完美解决。