el-table列表渲染时闪烁或者布局混乱的问题

项目场景：

当列表数据发生变化时，例如刷新列表或者更改查询条件获取列表数据重新渲染列表。

---

问题描述

列表正常这样子显示

当列表数据发生变化时，下面的这个状态会一闪而过，然后恢复正常。

---

原因分析：

列表数据变化时，vue会重新计算列表高度宽度重新渲染，这个过程会导致列表闪烁。

---

解决方案：

element-ui提供了一个表格方法doLayout，可以使用该方法避免表格闪烁的情况。

①

  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  }

② 

async fn(){
  const res = await getApi(); //在使用接口调取数据后
  this.tableData = res.data.rows; //将数据赋值给列表data
  this.$nextTick(() => { //调用doLayout重新渲染表格
    this.$refs['table'].doLayout();
  })
}