element ui中的el-table根据条件实现部分禁用

el-table提供了checkbox多选的功能

 

 但是有的时候，我们可能根据业务的诉求，对预列表中的数据部分不可选择，这个时候需要在Table-column 上添加 type="selectable“ 这个属性

 

 具体用法如下：

 <el-table-column :selectable="selectable"  type="selection" align="center" label="序号" width="140" />

 selectable(row, index) {
      if (index === 0) {
        return true;
      } else if (this.managerList[index].userId === this.managerList[index - 1].userId) {
        return false;
      } else {
        return true;
      }
    },

 上述用例实现的结果是默认多条数据中的key值相等的情况下，默认第一条数据可以选中，还有一种需求就是，选中其中一个，剩余其他的key值相同的数据默认不能选择的实现方式是：

1.首先给列表数据一个属性，默认值为true，我们在selectable（）这个函数中会根据这个属性去判断是否可以选择

 this.$nextTick(()=>{
        this.managerList.forEach(val=>{
          that.$set(val,'disabledChoiceFlag',true,)
        })
      })

2.在el-table中给一个@select 事件，在触发该事件的时候改变其中的我们新增的属性的值

this.$nextTick(()=>{
  
          that.managerList.forEach(val=>{
              val.disabledChoiceFlag = true
          })//这里还加一个循环给默认值为true时为了保证当取消选择时，其他值可以选择
          selection.forEach(item=>{
            that.managerList.forEach(val=>{
//根据条件去判断新增的属性时true还是false
              if(val.userId===item.userId&&val.productId!==item.productId){
                  val.disabledChoiceFlag = false
                }
              })
            })
          })

3.selectable（）函数的写法判断依据则为

 selectable(row,index) {
      // if (index === 0) {
      //   return true;
      // } else if (this.managerList[index].userId === this.managerList[index - 1].userId) {
      //   return false;
      // } else {
      //   return true;
      // }
      if(!this.managerList[index].disabledChoiceFlag){
        return false
      }else{
        return true
      }
     
        
      

第二种方式可能更加符合业务的使用方式，当然，也可以实现单选；但是第二种方式的全选实现起来会比较复杂，所以我目前的处理方式是禁用全选；

>>>.list-table th .el-checkbox{
    display:none !important;
}
<!--由于我是在当前组件中使用的，所以用了一个>>>,确保样式生效-->