element-ui?tree?手動(dòng)展開(kāi)功能實(shí)現(xiàn)(異步樹(shù)也可以)

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

這篇文章主要介紹了element-ui?tree?手動(dòng)進(jìn)行展開(kāi)（異步樹(shù)也可以）,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，需要的朋友可以參考下

背景

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

1.監(jiān)聽(tīng)復(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)展開(kāi)，使用node.expand()方法

handleCheck(nodeData,  treeChecked) {
      let node = this.$refs.tree.getNode(nodeData.id)
      //將選中的未展開(kāi)的節(jié)點(diǎn)進(jìn)行展開(kāi)
      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)展開(kāi)并選中，先展開(kāi)再勾選也可以自動(dòng)展開(kāi)）

1.監(jiān)聽(tīng)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.編寫(xiě)展開(kāi)結(jié)點(diǎn)方法

handleCheckChange(nodeData, nodeSelected) {
      //展開(kāi)選中的未展開(kāi)的節(jié)點(diǎn)
      let tree = this.$refs.tree;
      let node = tree.getNode(nodeData.id)
      //展開(kāi)選中的未展開(kāi)的節(jié)點(diǎn)
      this.expandNotExpandNodes(node);

      //具體業(yè)務(wù)實(shí)現(xiàn)
      console.log(nodeData, nodeSelected)
    },
    //展開(kāi)選中的未展開(kāi)的節(jié)點(diǎn)
    expandNotExpandNodes(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ù)，形成遞歸展開(kāi)
            tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
          }
        })
      }
    },

到此這篇關(guān)于element-ui tree 手動(dòng)進(jìn)行展開(kāi)（異步樹(shù)也可以）的文章就介紹到這了,更多相關(guān)element-ui tree手動(dòng)展開(kāi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: