el-table jitter problem (solved)

el-table jitter problem (solved)

Problem Description
el-table shakes from hiding to displaying

el-table jitter problem

The cause of the problem is that
el-table does not use a fixed column width, but a dynamically calculated column width, and uses v-show to control the visibility of el-table or its ancestors. For example, in the case of el-tabs nesting el-table, in The el-table will shake when the tab is switched, because the tab switching of el-tabs is controlled by v-show by default

Solution Re-
layout the el-table immediately after the el-table is updated from hidden to displayed dom (that is, call the doLayout method of el-table), for example, call doLayout in the nextTick or update life cycle:

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

or

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

full code

<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>