美文网首页
element el-table-column使用v-if导致列

element el-table-column使用v-if导致列

作者: 小小_128 | 来源:发表于2021-12-10 10:46 被阅读0次

当我代码中的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

相关文章

网友评论

      本文标题:element el-table-column使用v-if导致列

      本文链接:https://www.haomeiwen.com/subject/tuzffrtx.html