关于element-ui中，页面上有多个el-table并通过v-if、v-else等控制是否显示时，type=selection勾选框失效或不显示的问题

刚开始是勾选框那一列直接空了什么都不显示，搜索了一下说是给el-table标签增加id，加了之后是显示了，但是点击任何选框都会直接取消全部选中效果，翻了半天源码也没发现到底是哪里事件冲突了还是怎么回事，烦了，干脆自己写勾选框了。首先把type=selection的列修改一下：

 <!-- 原来： -->
<el-table-columntype="selection"width="55"align="center"
/><!-- 现在： -->
<el-table-columnwidth="55"align="center"
><templateslot-scope="{row}"slot="header"><el-checkbox :indeterminate="isIndeterminate"v-model="checkAll"@change="handleCheckAllChange"></el-checkbox></template><template slot-scope="scope"><el-checkbox v-model="scope.row.checked" @change="handleCheckedChange"/></template>
</el-table-column>

获取数据的时候记得加上checked用于绑定是否选中：

var ids = '' //已被选中保存过的id们 另外一个接口获取 我就不写了
//列表数据 接口获取过了
this.listData.forEach((element, index) => {//在已保存列表里 选中if (ids.indexOf(element.id) != -1) {this.$set(this.listData[index], 'checked', true)} else {this.$set(this.listData[index], 'checked', false)}
})

勾选事件：

//单个checkbox选中/不选事件handleCheckedChange (value) {let checkedCount = value.length;//判断是否变成了全选/全不选 置状态this.checkAll = checkedCount === this.listData.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.listData.length;},//全选/全不选切换handleCheckAllChange (val) {//改变每一条的选中状态this.listData.forEach((element, index) => {this.$set(this.listData[index], 'checked', val)})//全选框的状态 单纯显示this.isIndeterminate = false;},