快捷導(dǎo)航

element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)詳解

更新時間：2023年01月19日 09:15:21 作者：幫幫我365

element-ui中的table的多選很好用,但是如果其中某一項禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下

問題總結(jié)：

當(dāng)條件數(shù)據(jù)全被禁用時，全選按鈕也變成禁用的狀態(tài)，而不是隱藏。有會做的小伙伴希望跟帖。謝謝！

復(fù)選框框架：

通過調(diào)用selectable方法，進(jìn)行禁用復(fù)選框。

<!-- 復(fù)選框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />
 
    <el-table-column label="編號" align="center" prop="studentId" />

1.指定行禁用：

    //復(fù)選框禁用
    selectable(row,rowIndex) {
      //索引是從0開始，條件1是指只有第2行數(shù)據(jù)不被禁用  
      if(rowIndex == 1){
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

效果：

2.條件禁用：

    //復(fù)選框禁用
    selectable(row,rowIndex) {
      //只有姓名【zhang】不被禁用
      if (row.studentName == "zhang") {
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

效果：

問題點：當(dāng)條件數(shù)據(jù)全被禁用時，全選按鈕不是禁用的狀態(tài)。

    //復(fù)選框全部禁用
    selectable(row,rowIndex) {
      return false;
    }

效果：

復(fù)選框全被禁用時，全選按鈕將被隱藏

回避做法：

加了一個:header-cell-class-name屬性，通過調(diào)用cellClass方法，當(dāng)全被禁用時，全選按鈕將被隱藏。

<!-- 復(fù)選框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
:header-cell-class-name="cellClass"
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />
 
    <el-table-column label="編號" align="center" prop="studentId" />

實現(xiàn)：

定義一個參數(shù)DisableSelection:true，實現(xiàn)全選禁用。

export default {
  name: "Student",
  data() {
    return {
      // 全選按鈕隱藏
      DisableSelection:true,
    }
  }
}

追加全選按鈕的隱藏樣式：

<style>
  .el-table .DisableSelection .cell .el-checkbox__inner{
          display: none;
          position: relative;
        }
  .el-table .DisableSelection .cell:before{
          content: "";
          position: absolute;
  }
</style>

追加全選按鈕隱藏函數(shù)cellClass，啟用隱藏樣式：

    //全選按鈕隱藏
    cellClass(row){
      row.length
        console.log(row)
          if(this.DisableSelection){
            if (row.columnIndex === 0) {
              return 'DisableSelection'
            }
          }   
    },

復(fù)選框當(dāng)存在不禁用時，重置DisableSelection屬性值：

    //復(fù)選框禁用
    selectable(row,rowIndex) {
      //所有行都被禁用
      if(rowIndex < 0){
        this.DisableSelection = false && this.DisableSelection;
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    },

效果：全被禁用時，全選按鈕被隱藏

存在可選按鈕場合：前兩行可選。

    //復(fù)選框禁用
    selectable(row,rowIndex) {
      //前兩行可選的狀態(tài)
      if(rowIndex < 2){
        this.DisableSelection = false && this.DisableSelection;
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    },

當(dāng)存在可選時，全選按鈕被表示出來

問題總結(jié)：

當(dāng)條件數(shù)據(jù)全被禁用時，全選按鈕也變成禁用的狀態(tài)，而不是隱藏。

總結(jié)

到此這篇關(guān)于element-ui table使用type='selection'復(fù)選框全禁用(全選禁用)的文章就介紹到這了,更多相關(guān)element-ui table復(fù)選框全禁用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: