今天开发时,有一个页面需要使用自定义的列表组件,共有两个列表,用按钮切换列表展示,但是第二个列表不需要头部的选择框。
本来配置selection选项即可,但是切换过来第二个列表无论怎么配置还是带着选择框的样式,无法去掉,相同配置放到其他页面却没有选择框。
代码和样式如下:
<-- 部分配置已忽略 -->
<el-table-wrap
v-if="invoiceStatus === 'bill'"
:data="dataList"
>
<-- 配置选择框 -->
<el-table-column type="selection" width="40">
</el-table-column>
</el-table-wrap>
<el-table-wrap
v-else
:data="customDataList"
>
<-- 没有配置 -->
</el-table-wrap>
但是第二个实现出来却是这样的:
但是奇怪的是,同样的配置在其它界面就没有选择框,最后经过调试发现把v-if改成v-show显示没有问题了。
<-- 部分配置已忽略 -->
<el-table-wrap
v-show="invoiceStatus === 'bill'"
:data="dataList"
>
<el-table-column type="selection" width="40">
</el-table-column>
</el-table-wrap>
<el-table-wrap
v-show="invoiceStatus === 'custom'"
:data="customDataList"
>
</el-table-wrap>
原来是v-if和v-show的区别,v-if会把元素销毁,再创建元素的时候,vue在虚拟dom阶段会复用之前的节点,导致第二个列表携带着第一个列表的配置。
v-show只是隐藏显示,两个列表会同时创建,vue会自动标识加上key值。
当然给列表组件加上key也可以解决这个问题,给一个加上即可。
<-- 部分配置已忽略 -->
<el-table-wrap
v-if="invoiceStatus === 'bill'"
key="bill"
:data="dataList"
>
<el-table-column type="selection" width="40">
</el-table-column>
</el-table-wrap>
<el-table-wrap
v-else
:data="customDataList"
>
</el-table-wrap>
有不一致配置时避免使用v-if改为v-show,或者加上key值。
复现demo:
<template>
<div>
<el-button type="primary" @click="selection = !selection">切换</el-button>
<el-table v-if="selection" :data="tableData">
<el-table-column type="selection" width="55"/>
<el-table-column prop="name" label="姓名" width="120"/>
<el-table-column prop="address" label="地址" show-overflow-tooltip/>
</el-table>
<el-table v-else :data="tableData">
<el-table-column prop="name" label="姓名" width="120"/>
<el-table-column prop="address" label="地址" show-overflow-tooltip/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
],
selection: true,
};
},
created() {},
methods: {},
};
</script>
<style scoped>
</style>
评论