el テーブルのジッター問題 (解決済み)

el テーブルのジッター問題 (解決済み)

問題の説明
el-table が非表示から表示に揺れる

el テーブルのジッターの問題

この問題の原因は、
el-table が固定の列幅を使用せず、動的に計算された列幅を使用し、v-show を使用して el-table またはその祖先の可視性を制御していることです。 -tabs ネストされた el-table, in el-tabs のタブ切り替えはデフォルトで v-show によって制御されているため、タブを切り替えると el-table が揺れます

ソリューション
el-table が非表示から表示 dom に更新された直後に el-table を再レイアウトします (つまり、el-table の doLayout メソッドを呼び出します)。たとえば、nextTick で 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>