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;
}
<!--由於我是在當前組件中使用的，所以用了一個>>>,確保樣式生效-->