当对表格中列根据需求显示隐藏时，发现列对应的数据发生错乱，如下：
image.png
- 解决方法：
在 el-table-column 中加入 :column-key="String(Math.random())"
<el-table-column v-if="listQuery.repairState !== '6001501' && listQuery.repairState !== '6001503'" :column-key="String(Math.random())" label="审核意见" header-align="center" align="center" min-width="120">
<template slot-scope="scope">{{ scope.row.auditAdvice }}</template>
</el-table-column>
-
若是子父组件关系，父组件不同条件下，子组件渲染不同表格（不同条件对应不同列显示隐藏）
image.png
image.png
解决：
image.png
<template>
<div class="app-container">
<div style="backgroundColor: #fff;padding: 10px; borderRadius: 5px">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="待提交审批" name="6001501" />
<el-tab-pane label="待审核" name="6001503" />
<el-tab-pane label="审核不通过" name="6001504" />
<el-tab-pane label="审核已通过" name="6001502" />
<el-tab-pane label="维修中" name="6001505" />
<el-tab-pane label="完成" name="6001506" />
</el-tabs>
<div :key="activeName">
<List :fquery="fquery" />
</div>
</div>
</div>
</template>
<script>
import waves from '@/directive/waves'
import List from './components/list'
export default {
directives: { waves },
components: { List },
data() {
return {
activeName: '6001501',
fquery: {
repairState: '6001501'
}
}
},
created() {
},
methods: {
handleClick() {
this.fquery.repairState = this.activeName
}
}
}
</script>
<style lang="scss" scoped>
</style>
注：亲测方法二解决更彻底，方法一更适用简单且少的条件判断
eg: 子组件表格组件内部分代码，此多个情况判断，方法二更好解决
<el-table-column v-if="listQuery.repairState == '6001501' || listQuery.repairState == '6001502' || listQuery.repairState == '6001504'" label="操作" width="100">
<template slot-scope="scope">
<span v-if="listQuery.repairState == '6001501' || listQuery.repairState == '6001504'" class="v-btn"><el-button size="mini" plain @click="handleEdit(scope)">修改</el-button></span>
<span v-if="listQuery.repairState == '6001502'" class="v-btn"><el-button size="mini" plain @click="handleSendRepair(scope)">送修</el-button></span>
</template>
</el-table-column>
原因：
在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的，于是需要添加column-key来做区分！
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以，通过column-key去标识一下当前行是唯一的，不许复用就行了
