在最近的項目中,有需求要做到根據字段顯示列,原來以為簡單的v-if可以解決。
在開發的過程中遇到問題,
<el-table ref="multipleTable"
:data="assetData"
class="select_wrap"
border
:header-cell-style="{background:'#F5F7FA'}"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :key="Math.random()" v-if="this.systemType1 == 'OPORE'"></el-table-column>
<el-table-column prop="subject" label="說明" :key="Math.random()" show-overflow-tooltip></el-table-column>
<el-table-column prop="userName" label="創建用戶" :key="Math.random()" show-overflow-tooltip></el-table-column>
<el-table-column prop="beginTime" label="創建時間" :key="Math.random()" show-overflow-tooltip> </el-table-column>
<el-table-column prop="zrson" label="不關閉原因" :key="Math.random()" width='100' show-overflow-tooltip v-if="this.systemType1 == 'OPORE'"></el-table-column>
</el-table>
在不加:key="Math.random()"的時候會報錯 h.$scopedSlots.default is not a function
究其原因,是因為表格是element-ui通過循環產生的,而vue在dom重新渲染時有一個性能優化機制,就是相同dom會被復用,這就是問題所在,所以,通過key去標識一下當前行是唯一的,不許復用,就行了。
添加 :key="Math.random()"
