欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年01月19日 09:15:21   作者:幫幫我365  
element-ui中的table的多選很好用,但是如果其中某一項(xiàng)禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下

問題總結(jié):

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

復(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="編號(hào)" 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;  //禁用
      }
    }

效果:

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

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

效果:

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

回避做法:

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

<!-- 復(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="編號(hào)" align="center" prop="studentId" />

實(shí)現(xiàn):

定義一個(gè)參數(shù)DisableSelection:true,實(shí)現(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)存在不禁用時(shí),重置DisableSelection屬性值:

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

效果:全被禁用時(shí),全選按鈕被隱藏

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

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

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

問題總結(jié): 

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

總結(jié)

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

相關(guān)文章

最新評(píng)論