日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

element tree懶加載默認(rèn)展開指定節(jié)點(diǎn)

作者:chunchun_H 更新時(shí)間: 2022-10-14 編程語言
  • 最近有個(gè)需求,懶加載樹形結(jié)構(gòu),默認(rèn)展開二級(jí)節(jié)點(diǎn)。試了獲取節(jié)點(diǎn)設(shè)置節(jié)點(diǎn)的expanded屬性,發(fā)現(xiàn)不生效this.$refs.tree.store.nodesMap[data.id].expanded = true
  • 看了下官方文檔利用default-expanded-keys屬性,懶加載第一級(jí)的時(shí)候?qū)⒌谝患?jí)節(jié)點(diǎn)的key放到定義的默認(rèn)展開數(shù)組即default-expanded-keys動(dòng)態(tài)綁定的數(shù)組就可以實(shí)現(xiàn)改工能
  • 部分代碼入下圖
//css
<el-tree
      ref="menuTree"
       :props="defaultProps"
       node-key="id"
       :key="treeKey"
       lazy
       :default-expanded-keys="treeExpandelKeys"
       :load="loadDeptNode"
       :highlight-current="true"
       @node-contextmenu="rightClick"
       @node-expand="nodeExpand"
        ></el-tree>
//js
loadDeptNode(node, resolve, cb) {
      this.resolve = resolve;
      // 查詢參數(shù)
      let reqData = {
        roleTypeId: this.roleTypeId,
      };
      if (node.level === 0) {
        this.rootNode = node;
        this.rootNode_resolve = resolve; //同上,把node.level == 0的resolve也存起來
        resolve([this.rootNodeData]);
        this.treeExpandelKeys.push(this.rootNodeData.id)
        this.fristNodeKeys.push(this.rootNodeData.id)
      } else if (node.level > 0) {
        // 向后臺(tái)發(fā)送查詢請(qǐng)求
        getNodesService({ params: { node: node.data.id } })
          .then((res) => {
            // 請(qǐng)求成功,且查詢出有數(shù)據(jù)時(shí)
            if (res && res.data) {
              let resData = res.data || [];
              var newN = [];
              resData.forEach((it) => {
                let newIt = Object.assign({}, it, {
                  leaf: it.leaf == "1" ? true : false,
                });
                newN.push(newIt);
              });
              if(node.level == 1){
                this.secondNodeKeys = [];
                newN.forEach(item=>{
                    this.secondNodeKeys.push(item.id)
                })
              }
              resolve(newN);
            }
            // 請(qǐng)求失敗的情況,或者是查無數(shù)據(jù)的時(shí)候
            else {
              resolve([]);
            }
          })
          .catch((e) => {
            if (node.level === 0) {
              resolve(treeData);
            } else {
              resolve([]);
            }
          });
      }
    },
     

原文鏈接:https://blog.csdn.net/organ_sweet/article/details/125450235

欄目分類
最近更新