vue+elementUI表格列顯示隱藏遇到bug


在最近的項目中,有需求要做到根據字段顯示列,原來以為簡單的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()"


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM