关于Element-ui中el-table出现的表格错位问题解决

this.data = data;
// 在数据更新后执行
this.$nextTick(() => {
      // myTable是表格的ref属性值
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
})

updated() {
    // myTable是表格的ref属性值
    if (this.$refs.myTable && this.$refs.myTable.doLayout) {
      this.$refs.myTable.doLayout();
    }
}

// 绑定window的onresize事件（注意，onresize事件只能有一个）
window.onresize = () => {
      // myTable是表格的ref属性值
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
}

beforeRouteEnter(to, from, next) {
    // myTable是表格的ref属性值
    if (this.$refs.myTable && this.$refs.myTable.doLayout) {
      this.$refs.myTable.doLayout();
    }
    //不能忘记这个哦
    next();
 }

activated() {
    // myTable是表格的ref属性值
    if (this.$refs.myTable && this.$refs.myTable.doLayout) {
      this.$refs.myTable.doLayout();
    }
 }

watch: {
    $route() {
      this.$nextTick(() => {
        // myTable是表格的ref属性值
        if (this.$refs.myTable && this.$refs.myTable.doLayout) {
          this.$refs.myTable.doLayout();
        }
      })
    }
 }

<template>
  <div id="app">
    <router-view ref="appView"></router-view>
  </div>
</template>
<script>
 
export default {
  data() {
  },
  watch: {
    $route() {
      //切换标签时
      this.handleRefreshTable();
    }
  },
  created() {
    let _this = this;
    //窗口改变时
    window.onresize = function () {
      _this.handleRefreshTable();
    };
  },
  updated() {
    //数据改变时
    this.handleRefreshTable();
  },
  methods: {
    handleRefreshTable() {
      this.$nextTick(() => {
        // 获取页面中已注册过ref的所有的子组件。
        let refList = this.$refs.appView.$refs;
        if (refList) {
          for (let i of Object.keys(refList)) {
            // 根据doLayout方法判断子组件是不是el-table
            if (refList[i] && refList[i].doLayout) {
              // 执行doLayout方法
              refList[i].doLayout();
            }
          }
        }
      })
    }
  }
};
</script>

<el-table :data="tableData" border>
    <el-table-column :key="Math.random()" prop="date" label="日期"> </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>

this.$nextTick(() => {
   this.$refs.tableRef.doLayout()
})