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

夏天咯2023-10-15 8:41

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

复制代码

 <!-- 原来： -->
<el-table-column
      type="selection"
      width="55"
      align="center"
/>
 <!-- 现在： -->
<el-table-column
    width="55"
    align="center"
>
    <template
        slot-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;
    },