When el-table uses v-if, the table header and the column value are serial/serialized. el-table form v-if shows and hides the problem of disordered styles

important point:

• When using v-show, table columns cannot be hidden, only v-if can be used.

Solution:

• Add : key="Math.random()" attribute to the <el-table-column> tag (or key="a unique value" is also available)

As shown below:

<!-- 添加一个不重复的key值，即可。如 :key="Math.random()"，指定绑定的key值，避免造成渲染错位问题，感觉原理类似 v-for 需绑定 key值类似 -->
<el-table-column label="名称" prop="name" :key="Math.random()" v-if="columns[6].visible" />
<el-table-column label="年龄" prop="age" :key="Math.random()" v-if="columns[7].visible" />
<el-table-column label="地址" prop="addr" :key="Math.random()" v-if="columns[8].visible" />
<el-table-column label="日期" prop="date" :key="Math.random()" v-if="columns[9].visible" />
<!-- 如果有抖动情况，可改为绑定固定值，如下:(绑定number，或绑定字符串) -->
<el-table-column label="名称" prop="name" :key="1" v-if="columns[6].visible" />
<el-table-column label="年龄" prop="age" :key="2" v-if="columns[7].visible" />
<el-table-column label="地址" prop="addr" key="addr" v-if="columns[8].visible" />
<el-table-column label="日期" prop="date" key="date" v-if="columns[9].visible" />