element-ui tree 手動進行展開（異步樹也可以）-有解無憂

背景

專案中用到了vue的element-ui框架，用到了el-tree組件，由于資料量很大，使用了資料懶加載模式，即異步樹，異步樹采用復選框進行結點選擇的時候，沒法自動展開，官方檔案找了半天也沒有找到好的辦法！找不到相關的配置，或者方法可以使用，經過除錯與閱讀elment-ui原始碼才發現有現成的方法可以進行結點展開，下面就介紹結點展開的實作！

1.監聽復選框點擊事件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.手動展開，使用node.expand()方法

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

專案中的實作（復選框勾選后能自動展開并選中，先展開再勾選也可以自動展開）

1.監聽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.撰寫展開結點方法

handleCheckChange(nodeData, nodeSelected) {
      //展開選中的未展開的節點
      let tree = this.$refs.tree;
      let node = tree.getNode(nodeData.id)
      //展開選中的未展開的節點
      this.expandNotExpandNodes(node);

      //具體業務實作
      console.log(nodeData, nodeSelected)
    },
    //展開選中的未展開的節點
    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];
            //手動觸發check-change事件，事件處理函式中回繼續呼叫此函式，形成遞回展開
            tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
          }
        })
      }
    },

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501645.html

標籤：其他

上一篇：Vue3系列12--keep-alive快取組件

下一篇：前端常用布局方式大全——細致講解