element-ui动态设置tabel列时,无效果,表头抖动,表格错乱,值不能正常展示等问题

踩坑日记：
最近用element-ui做一个动态列（频繁隐藏显示列）的表格踩坑记录下：

1、在el-table-column上使用v-show绑定是无效果
2、el-table-column几次切换显示/隐藏后，发现表格的排版完全乱了,或者值不能正常展示
3、表格头抖动

原因分析：

1、v-show绑定无效果的原因：
v-show起作用的本质是利用display:none控制隐藏，el-table-column的td是利用了display: table-cell 控制显示，而display：table-cell的优先级又高于display：none，所以v-show失效了。

2、表格排版错乱的原因：
由于template的作用是模板占位符，可帮助我们包裹元素，template不会被渲染到页面上。template标签不支持:key属性，如果不更新这个key的话,显示/隐藏列的时候,部分DOM不会重新渲染,导致table变化时候内容错乱。

有关表格数据渲染中key的作用如下:
key作为一个DOM节点的标识值，结合Diff算法可以实现对节点的复用。(key相同的节点会被复用)；只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。

注意： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

3、表格抖动的原因：
无论是显示列还是隐藏列，vue 都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。因为这个过程被直接反馈到了页面上，所以导致了 table 发生闪烁。可以使用element中的dolayout函数解决

解决方案：

1、v-show绑定无效果解决办法：
使用v-if控制列的显示与隐藏；分两种情况使用：

a: element组件 el-table-column
注意看结构；这里只采用了prop传值的写法；也就是说tabel展示出来的数据是只可读的不可以操作某一列里面的某一个字段；若只是可读，那么可以使用这个方法控制动态展示列；v-if绑定动态值；

<el-table-column  
v-if="showName" 
prop="name" 
label="姓名" 
align="center">
</el-table-column>

b: element组件 el-table-column (可以点击tabel表格的某一展示值，做一些事情，如：弹窗，跳转等)
注意看结构：这里多了 template 标签，通过包裹可以来做一些事情时必须加:key="Math.random()，否则会出现表格排版错乱问题

<el-table-column 
:key="Math.random()
 v-if="showName" 
 prop="name" 
 label="姓名" 
 align="center">
<template slot-scope="scope">
	<el-tag size="mini">
		<el-button type="text" @click="jumpInterfaceHome(scope.row)">{{ scope.row.CustName }}</el-button>
	</el-tag>
</template>
</el-table-column>

2、表格排版错乱解决办法：

:key=“Math.random()”

既然template标签不支持key属性，可通过在el-table-column标签加入
:key="Math.random()"属性，这个key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，依次来提升页面渲染性能。

3、表格抖动解决办法：

监视属性发生改变或者数据加载完，触发beforeUpdate生命周期函数，使得列的key发生改变（因为全都是随机数，全部发生改变），key发生改变表格重新渲染表格，可以解决问题二中加随机数造成的表格抖动的问题

beforeUpdate () {
  /**
   * 在数据加载完，重新渲染表格
   */
  this.$nextTick(() => {
    this.$refs.table.doLayout()
  })
},

————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/jinxin740202/article/details/118935723