快捷導(dǎo)航

Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能

更新時間：2023年10月10日 10:49:51 作者：@.十七

最近做的項目用到了全選全不選功能,于是就自己動手寫了一個,這篇文章主要給大家介紹了關(guān)于Element樹形控件el-tree實現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下

前言

本篇文章將詳細(xì)講解 vue3+Element Plus 項目中如何實現(xiàn)el-tree組件的一鍵全選反選功能：點擊一鍵全選時，將選中所有的節(jié)點，當(dāng)節(jié)點未被全部選中時，全選框為半選狀態(tài)。（最后有增加vue2+element ui 實現(xiàn)代碼）

vue3+Element Plus具體實現(xiàn)：

模板部分：

1，在合適位置（如el-tree同級）新增一個復(fù)選框組件 el-checkbox

<el-checkbox size="mini" :indeterminate="isIndeterminate" v-model="checkAll" 
@change="handleCheckAllChange" style="padding:0px;margin-right:5px;">
全選</el-checkbox>

步驟詳解：

（1） indeterminate 屬性用以表示 checkbox 的不確定狀態(tài)，一般用于實現(xiàn)全選的效果；

（2）v-model 綁定的值控制全選框是否為選中狀態(tài)；

（3）@change是狀態(tài)改變時觸發(fā)的事件。

2，給el-tree組件綁定ref屬性，node-key屬性，以及 @check-change事件

<el-tree ref="testingTree" :data="testingData" :props="testingProps" 
show-checkbox @check-change="testCheckChange" node-key="path" />

步驟詳解：

（1）在vue3中同樣是以ref屬性來獲取元素；

（2）check-change 事件當(dāng)復(fù)選框被點擊的時候觸發(fā)；

（3）node-key 節(jié)點標(biāo)識通常用id，實際開發(fā)根據(jù)后端數(shù)據(jù)來確定就好。

JS邏輯部分

3，實現(xiàn)全選及反選邏輯（代碼有點長，我會逐句講解）

//一鍵全選
    let checkAll = ref(false) //全選按鈕的綁定值
    let isIndeterminate = ref(false) //全選按鈕的全選，半選樣式 
    const testingTree = ref(null) //在vue3中使用ref獲取元素需要在setup中進(jìn)行聲明一個同名變量
    //1.1獲取當(dāng)前選中的節(jié)點
    function testCheckChange() {
      // 獲取Tree組件的實例，使用ref聲明的變量在邏輯代碼中使 用時需加 .value
      const tree = testingTree.value; 
      let checkedCount = 0;//被勾選上的一級節(jié)點個數(shù)
      let disabledCount = 0;//置灰的一級節(jié)點個數(shù)
      let indeterminateFlag = false;//有沒有一級節(jié)點處于半選狀態(tài)
      //遍歷所有一級節(jié)點(testingData為el-tree組件：data的值)
      for (let i = 0; i < testingData.value.length; i++) {
    //getNode為el-tree組件的實例方法，可以根據(jù) data 或者 key 拿到 Tree 組件中的 node
        if (tree.getNode(testingData.value[i]).disabled == true) {
          disabledCount += 1;//如果有置灰的節(jié)點，置灰變量加1
        }
        if (tree.getNode(testingData.value[i]).checked == true) {
          checkedCount += 1;//如果有勾選的節(jié)點，勾選變量加1
        }
        if (tree.getNode(testingData.value[i]).indeterminate == true) {
          indeterminateFlag = true;//如果有半選的節(jié)點，半選變量設(shè)為true
        }
      }
      if (checkedCount == 0) {
        isIndeterminate.value = false;
        checkAll.value = false;//如果勾選的一級節(jié)點數(shù)為0，則設(shè)置全選按鈕樣式不為半選樣式，全選的值為false
        if (indeterminateFlag == true) {//如果下面有半選的，設(shè)置全選按鈕的樣式為半選樣式
          isIndeterminate.value = true;
          checkAll.value = false;
        }
      }
      else if ((checkedCount + disabledCount) == testingData.value.length) {//如果樹上勾上的和置灰的加起來等于tree上data的長度，設(shè)置全選按鈕樣式不為半選樣式，全選值為true
        isIndeterminate.value = false;
        checkAll.value = true;
      }
      else {//上面條件不滿足，則說明沒有全部勾上，設(shè)置樣式為半選，全選值為false
        isIndeterminate.value = true;
        checkAll.value = false;
      }
      return;
    }
//全選按鈕勾上的方法事件
    function handleCheckAllChange(val) {
      isIndeterminate.value = false;//設(shè)置全選按鈕樣式不為半選
      if (checkAll.value == true) {
//如果是當(dāng)前值是全選，依次遍歷節(jié)點設(shè)置勾選，同時過濾的disabled為true的
        for (let i = 0; i < testingData.value.length; i++) {
          if (testingTree.value.getNode(testingData.value[i]).disabled == false) {
            testingTree.value.setChecked(testingData.value[i].path, true, true);
          }
        }
      }
      else {
//取消全選時置空
        testingTree.value.setCheckedKeys([])
      }

vue2+Element ui具體實現(xiàn)：

<template>
  <div>
    <el-checkbox size="mini" :indeterminate="isIndeterminate"  v-model="new_task_form.case_checkAll" @change="handleCheckAllChange" style="padding:0px;margin-right:5px;">全選</el-checkbox>
  </div>
  <el-tree
     style="max-height: 200px;overflow: auto;"
     :data="casedata"
     show-checkbox
     :default-expand-all="false"
     node-key="id"
     ref="casetree"
     highlight-current
     :props="defaultPorps"
      @check-change="case_check_change">
   </el-tree>
</template>

data(){
    return {
        new_task_form:{
            "case_checkAll":false //全選按鈕的綁定值
        },
        isIndeterminate:false,//全選按鈕的全選，半選樣式 
    }
},
methods:{
    case_check_change(node1,node2,node3){//樹節(jié)點check事件
            let checked_count = 0;//被勾選上的一級節(jié)點個數(shù)
            let disabled_count = 0;//置灰的一級節(jié)點個數(shù)
            let indeterminate_flag = false;//有沒有一級節(jié)點處于半選狀態(tài)
            //遍歷所有一級節(jié)點
            for(let i=0;i<this.casedata.length;i++){
                if(this.$refs.casetree.getNode(this.casedata[i]).disabled==true){
                    disabled_count += 1;//如果有置灰的節(jié)點，置灰變量加1
                }
                if(this.$refs.casetree.getNode(this.casedata[i]).checked==true){
                    checked_count += 1;//如果有勾選的節(jié)點，勾選變量加1
                }
                if(this.$refs.casetree.getNode(this.casedata[i]).indeterminate==true){
                    indeterminate_flag = true;//如果有半選的節(jié)點，半選變量設(shè)為true
                }
            }
            if(checked_count==0){
                this.isIndeterminate = false;
                this.new_task_form.case_checkAll = false;//如果勾選的一級節(jié)點數(shù)為0，則設(shè)置全選按鈕樣式不為半選樣式，全選的值為false
                if(indeterminate_flag==true){//如果下面有半選的，設(shè)置全選按鈕的樣式為半選樣式
                    this.isIndeterminate = true;
                    this.new_task_form.case_checkAll = false;
                }
            }
            else if((checked_count+disabled_count)==this.casedata.length){//如果樹上勾上的和置灰的加起來等于tree上data的長度，設(shè)置全選按鈕樣式不為半選樣式，全選值為true
                this.isIndeterminate = false;
                this.new_task_form.case_checkAll = true;
            }
            else{//上面條件不滿足，則說明沒有全部勾上，設(shè)置樣式為半選，全選值為false
                this.isIndeterminate = true;
                this.new_task_form.case_checkAll = false;
            }
            return;
        },
        handleCheckAllChange(val){//全選按鈕勾上的方法事件
            this.isIndeterminate = false;//設(shè)置全選按鈕樣式不為半選
            if(this.new_task_form.case_checkAll==true){//如果是當(dāng)前值是全選，依次遍歷節(jié)點設(shè)置勾選，同時過濾的disabled為true的
                for(let i=0;i<this.casedata.length;i++){
                    if(this.$refs.casetree.getNode(this.casedata[i]).disabled==false){
                        this.$refs.casetree.setChecked(this.casedata[i].id,true,true);
                    }
                }
            }
            else{//當(dāng)前值不是全選，設(shè)置勾選列表為空
                 this.$refs.casetree.setCheckedKeys([]);
            }
        },
}