当我代码中的el-table写成这样时,会出现列与对应数据错乱
<el-table-column label="店铺地址" prop="address" align="center" v-if="tabIndex !== '2'"/>
<el-table-column label="申请来源" prop="applicationSource" align="center" v-if="tabIndex === '2'"/>
<el-table-column label="入驻小区" prop="communityName" align="center" />
<el-table-column label="联系方式" prop="mobile" align="center" v-if="tabIndex === '0'" />
<el-table-column label="状态" align="center" v-if="tabIndex === '1'">
<template slot-scope="scope">
<div>{{ scope.row.result === 0 ? '待审核' : scope.row.result === 1 ? '通过' : '拒绝' }}</div>
</template>
</el-table-column>
image.png
后来我搜索到了el-table的列其实也是基础循环出来的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,所以给每一个列加了一个特定的key,确定了这几个列的唯一性,就没有问题喽!!
代码如下:
image.png










网友评论