Vue中element中table组件表头动态添加出现闪烁

Vue中Element中table组件表头动态添加出现闪烁

table组件表头动态添加时，

当新增一列时，表头先是变高然后迅速复原； 当减少一列时，表头先是空出了提出那一列的位置，然后迅速将空出来的空间重新分配给剩余的两列； 通过这么一粗浅的分析，我们可以很容易的看出：无论是新增列还是删除列，vue 都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。因为这个过程被直接反馈到了页面上，所以导致了 table 发生闪烁。

很显然，只要我们把这个过程隐藏，就可以解决闪烁问题。

解决办法

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