el-table 抖动问题（已解决）

el-table 抖动问题（已解决）

问题描述
el-table由隐藏到显示出现抖动现象

el-table抖动问题

问题原因
el-table没有采用固定列宽，而是采用动态计算的列宽，并且使用v-show来控制el-table或其祖先的显隐，例如el-tabs嵌套el-table的情况，在tab切换时el-table会出现抖动，这是因为el-tabs的tab切换默认是使用v-show控制的

解决方法
在el-table由隐藏到显示的dom更新后立刻对el-table进行重新布局（也就是调用el-table的doLayout方法），例如在nextTick或update生命周期中调用doLayout：

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

或

update() {
    
      
  this.$refs.xxx.doLayout()
}

完整代码

<template>
  <div>
    <el-switch v-model="show"></el-switch>
    <div v-show="show">
      <el-table :data="xxxData"
                ref="xxx"
      >
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="姓名"
                         min-width="180"
                         prop="name"
                         show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" width="214px">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="text">编辑</el-button>
            <el-button icon="el-icon-delete" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
      
      
  name: 'table-v-show',
  data() {
      
      
    return {
      
      
      show: true,
      xxxData: [
        {
      
      
          id: '1',
          name: 'name1'
        }
      ],
    }
  },
  
  // 方法一
  // beforeUpdate() {
      
      
  //   this.$nextTick(() => {
      
      
  //     this.$refs.xxx.doLayout()
  //   })
  // },
  
  // 方法二
  // updated() {
      
      
  //   this.$refs.xxx.doLayout()
  // },
  
  // 方法三
  watch: {
      
      
    show(val) {
      
      
      if (val) {
      
      
        this.$nextTick(() => {
      
      
          this.$refs.xxx.doLayout()
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>