當對表格中列根據(jù)需求顯示隱藏時合溺，發(fā)現(xiàn)列對應的數(shù)據(jù)發(fā)生錯亂厉碟，如下：
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: 子組件表格組件內(nèi)部分代碼素征，此多個情況判斷环凿，方法二更好解決
<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來區(qū)分則會出現(xiàn)復用的情況拷邢。而原本這些標簽每一個都是獨立的袱院，于是需要添加column-key來做區(qū)分！
表格是element-ui通過循環(huán)產(chǎn)生的瞭稼，而vue在dom重新渲染時有一個性能優(yōu)化機制忽洛，就是相同dom會被復用，所以环肘，通過column-key去標識一下當前行是唯一的欲虚，不許復用就行了
