element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選功能

更新時(shí)間：2022年08月16日 11:11:23 作者：追極

這篇文章主要介紹了element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下

背景

項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件。由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹。異步樹采用復(fù)選框進(jìn)行結(jié)點(diǎn)選擇的時(shí)候，沒法自動(dòng)展開，官方文檔找了半天也沒有找到好的辦法！找不到相關(guān)的配置，或者方法可以使用。經(jīng)過調(diào)試與閱讀elment-ui源碼才發(fā)現(xiàn)有現(xiàn)成的方法可以進(jìn)行結(jié)點(diǎn)展開。下面就介紹結(jié)點(diǎn)展開的實(shí)現(xiàn)！

1.監(jiān)聽復(fù)選框點(diǎn)擊事件check

<el-tree
        :props="mulprops"
        :load="loadNode"
        lazy
        node-key="id"
        show-checkbox
        accordion
        @current-change="currentChange"
        :filter-node-method="filterNode"
        @check="handleCheck"
        ref="tree"
        :default-checked-keys="defaultCheckedNodes"
        :default-expanded-keys="defaultExpandedNodes"
    >
    </el-tree>

2.手動(dòng)展開，使用node.expand()方法

handleCheck(nodeData,  treeChecked) {
      let node = this.$refs.tree.getNode(nodeData.id)
      //將選中的未展開的節(jié)點(diǎn)進(jìn)行展開
      if(node.checked && !node.expanded){
        node.expand(function(){
          for(let i=0; i< node.childNodes.length; i++){
            node.childNodes[i].expand()
          }
        })
      }
    }

項(xiàng)目中的實(shí)現(xiàn)

一、復(fù)選框勾選后能自動(dòng)展開并選中，先展開再勾選也可以自動(dòng)展開

1.監(jiān)聽check-change事件

<el-tree
        :props="mulprops"
        :load="loadNode"
        lazy
        node-key="id"
        show-checkbox
        accordion
        @check-change="handleCheckChange"
        :filter-node-method="filterNode"
        ref="tree"
        :default-checked-keys="defaultCheckedNodes"
        :default-expanded-keys="defaultExpandedNodes"
    >
    </el-tree>

2.編寫展開勾選結(jié)點(diǎn)方法

handleCheckChange(nodeData, nodeSelected) {
      let tree = this.$refs.tree;
      let node = tree.getNode(nodeData.id)

      //展開選中的未展開的節(jié)點(diǎn)
      this.expandCheckedNotExpandNodes(node);

      //具體業(yè)務(wù)實(shí)現(xiàn)
      console.log(nodeData, nodeSelected)
    },
    //展開選中的未展開的節(jié)點(diǎn)
    expandCheckedNotExpandNodes(node) {
      let tree = this.$refs.tree;
      if (node.checked && !node.expanded && !node.isLeaf) {
        node.expand(function () {
          let childNodes = node.childNodes;
          for (let i = 0; i < childNodes.length; i++) {
            let childNode = childNodes[i];
            //手動(dòng)觸發(fā)check-change事件，事件處理函數(shù)中回繼續(xù)調(diào)用此函數(shù)，形成遞歸展開
            tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
          }
        })
      }
    },

二、展開指定結(jié)點(diǎn)

 <el-input type="text" v-model='nodeDataIds' placeholder="請輸入結(jié)點(diǎn)數(shù)據(jù)ID(多個(gè)以逗號分割)"> ></el-input>
    <el-button type="primary" @click="expandNodes(nodeDataIds.split(','))">展開指定結(jié)點(diǎn)</el-button>

//展開匹配的結(jié)點(diǎn)，根結(jié)點(diǎn)默認(rèn)展開
    expandNodes(nodeDataIds){
        let that = this;
        let tree = this.$refs.tree;
        let rootNode = tree.root;
        this.expandNode(rootNode, nodeDataIds);
    },
    //展開指定結(jié)點(diǎn)下匹配的結(jié)點(diǎn)
    expandNode(node, nodeDataIds){
        let that = this;
        //當(dāng)前結(jié)點(diǎn)需要展開未展開，則展開(根結(jié)點(diǎn)默認(rèn)展開)
        if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
           //展開孩子結(jié)點(diǎn)
           let expandChildren = function(){
               let childNodes = node.childNodes;
               for (let i = 0; i < childNodes.length; i++) {
                  let childNode = childNodes[i];
                  //遞歸展開孩子結(jié)點(diǎn)
                  that.expandNode(childNode, nodeDataIds);
               }
           }
           if(!node.expanded){
               //當(dāng)前結(jié)點(diǎn)未展開則先展開，展開后再展開孩子結(jié)點(diǎn)
               node.expand(function(){
                    expandChildren();
               });
           }else{
                //當(dāng)前結(jié)點(diǎn)已展開，直接展開孩子結(jié)點(diǎn)
                expandChildren();
           }
        }
    },

三. 勾選指定結(jié)點(diǎn)

1.異步樹，需先展開指定結(jié)點(diǎn)，然后有數(shù)據(jù)了才能勾選上（即：展開父結(jié)點(diǎn)，子節(jié)點(diǎn)有了數(shù)據(jù)才能勾選上）

  <el-button type="primary" @click="checkNodes(nodeDataIds.split(','))">選中指定結(jié)點(diǎn)</el-button>

expandNodes(nodeDataIds)
展開完成的時(shí)機(jī)比較難判斷
 checkNodes(nodeDataIds){
         let tree = this.$refs.tree;
         tree.setCheckedKeys(nodeDataIds, false)
    }

2.設(shè)置默認(rèn)勾選的結(jié)點(diǎn)，再調(diào)用展開方法會(huì)自動(dòng)勾選上，適合寫數(shù)據(jù)回顯

default-checked-keys=['node001','node002']

expandNodes(nodeDataIds)

四、展開并勾選結(jié)點(diǎn)（支持異步樹）牛逼版，實(shí)現(xiàn)展開回調(diào)

//展開匹配的結(jié)點(diǎn)，根結(jié)點(diǎn)默認(rèn)展開
    expandNodes(nodeDataIds){
        let that = this;
        let tree = this.$refs.tree;
        let rootNode = tree.root;
        this.expandNode(rootNode, nodeDataIds, function(){
            that.checkNodes(['node001','node002']);
        });
    },
    //展開指定結(jié)點(diǎn)下匹配的結(jié)點(diǎn)
    expandNode(node, nodeDataIds, callback){
        let that = this;
        //遞歸進(jìn)入
        that.recursiveEnter();

        //當(dāng)前結(jié)點(diǎn)需要展開未展開，則展開(根結(jié)點(diǎn)默認(rèn)展開)
        if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
           //展開孩子結(jié)點(diǎn)
           let expandChildren = function(){
               let childNodes = node.childNodes;
               if(childNodes.length > 0){
                   for (let i = 0; i < childNodes.length; i++) {
                      let childNode = childNodes[i];
                      //遞歸展開孩子結(jié)點(diǎn)
                      that.expandNode(childNode, nodeDataIds, callback);
                   }
               }
           }
           if(!node.expanded){
               //當(dāng)前結(jié)點(diǎn)未展開則先展開，展開后再展開孩子結(jié)點(diǎn)
               node.expand(function(){
                    //展開孩子結(jié)點(diǎn)
                    expandChildren();

                    //遞歸退出
                    that.recursiveExit(callback);
               });
           }else{
                //當(dāng)前結(jié)點(diǎn)已展開，直接展開孩子結(jié)點(diǎn)
                expandChildren();

                //遞歸退出
                that.recursiveExit(callback);
           }
        }else{
            //遞歸退出
            that.recursiveExit(callback);
        }
    },
    //遞歸計(jì)入計(jì)數(shù)剩余遞歸次數(shù)
    recursiveEnter(){
        this.recursiveRemainCount++;
        console.log('enter recursiveRemainCount', this.recursiveRemainCount)
    },
    //遞歸退出計(jì)數(shù)剩余遞歸次數(shù)
    recursiveExit(callback){
       this.recursiveRemainCount--;
       console.log('exit recursiveRemainCount', this.recursiveRemainCount)
       if(this.recursiveRemainCount==0){
         if(callback){
            callback();
         }
       }
    },
    checkNodes(nodeDataIds){
         let tree = this.$refs.tree;
         tree.setCheckedKeys(nodeDataIds, false)
    }

到此這篇關(guān)于element-ui tree 異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選的文章就介紹到這了,更多相關(guān)element-ui tree 異步樹內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: