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

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

 

 

    
    

获取数据的时候记得加上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;
    },

你可能感兴趣的:(ui,vue.js,javascript,elementui)