el-tree樹組件懶加載怎么實(shí)現(xiàn)

這篇“el-tree樹組件懶加載怎么實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“el-tree樹組件懶加載怎么實(shí)現(xiàn)”文章吧。

實(shí)現(xiàn)懶加載tree，需要為tree組件添加lazy和:load="load"

首先，load屬性綁定一個(gè)懶加載函數(shù)，當(dāng)點(diǎn)擊節(jié)點(diǎn)時(shí)觸發(fā)

一般是通過樹節(jié)點(diǎn)id請(qǐng)求后端接口，添加新的節(jié)點(diǎn)數(shù)據(jù)，但我最近遇到的是后端一次性返回上千條數(shù)據(jù)（樹數(shù)組結(jié)構(gòu)），由前端進(jìn)行處理實(shí)現(xiàn)懶加載

我們來看下怎么實(shí)現(xiàn)

  <el-tree
      ref="tree"
      lazy
      :load="load"
      highlight-current
      @node-click="handleNodeClick"
      :expand-on-click-node="false"
      :node-key="key"
      :props="defaultProps"
      :current-node-key="currentNodeKey"
    >
   </el-tree>

• load方法會(huì)回調(diào)兩個(gè)參數(shù)，第一個(gè)是節(jié)點(diǎn)信息node，第二個(gè)是加載函數(shù)resolve

• resolve會(huì)默認(rèn)觸發(fā)一次，并且node.level===0，所以就不用在created中請(qǐng)求后端數(shù)據(jù)了，直接在默認(rèn)觸發(fā)中請(qǐng)求后端數(shù)據(jù)

• 如果node.level===0說明是默認(rèn)觸發(fā)，直接resolve請(qǐng)求后端返回的樹數(shù)組數(shù)據(jù)，el-tree懶加載情況下只會(huì)渲染數(shù)組的第一級(jí)，不會(huì)渲染數(shù)組的children

• 在默認(rèn)觸發(fā)的時(shí)候?qū)鋽?shù)組轉(zhuǎn)成扁平數(shù)組，后續(xù)懶加載節(jié)點(diǎn)的時(shí)候從扁平數(shù)組里取就可以了

• 因?yàn)閼屑虞d樹無(wú)法判斷有沒有子節(jié)點(diǎn)，所以必須手動(dòng)添加leaf:true，才能取消左側(cè)的小箭頭，在樹結(jié)構(gòu)數(shù)組轉(zhuǎn)換成扁平數(shù)組時(shí)給沒有子節(jié)點(diǎn)的數(shù)組對(duì)象加上這一屬性

• 很多時(shí)候需要默認(rèn)展開樹節(jié)點(diǎn)，比如選中第一級(jí)下第一個(gè)節(jié)點(diǎn)，在nextTick中nodedata.expanded = true來展開節(jié)點(diǎn)，nodedata.loadData()再次觸發(fā)resolve函數(shù)

  methods: {
    /** 傳遞一個(gè)懶加載函數(shù)給el-tree組件 */
    load(node, resolve) {
      this.chooseNode = node;
      // 這里后端給的數(shù)據(jù)唯一標(biāo)識(shí)不是id，是key，根據(jù)個(gè)人數(shù)據(jù)修改
      this.getTreeData(node.level, node.data.key, resolve);
    },
    /** 懶加載樹節(jié)點(diǎn)數(shù)據(jù)處理函數(shù) */
    async getTreeData(level, key, resolve) {
      if (level === 0) {
        this.loading = true;
        const { data: res } = await http.post('getTreeNode');
        if (res.code === 200 && res.data && res.data.length) {
          this.treeData = this.treeArrayToArray(res.data);
          resolve(res.data);
          this.$nextTick(() => {
            // 零級(jí)的第一個(gè)子節(jié)點(diǎn)，也就是第一級(jí)的第一個(gè)節(jié)點(diǎn)
            let nodedata = this.chooseNode.childNodes[0];
            nodedata.expanded = true;
            // 再次觸發(fā)load方法
            nodedata.loadData();
            // 注意，因?yàn)樯戏皆俅斡|發(fā)load方法，走了this.chooseNode = node;這一步，所以這里的 this.chooseNode指向的是零級(jí)的子節(jié)點(diǎn)，也就是第一級(jí)，這里的`this.chooseNode.childNodes[0]`表示的是是第二級(jí)的第一個(gè)節(jié)點(diǎn)
            this.currentNodeKey = this.chooseNode.childNodes[0].data.key;
            this.handleNodeClick(this.chooseNode.childNodes[0].data);
          });
        } else {
          resolve([]);
        }
        this.loading = false;
      } else {
        // 根據(jù)key去找到點(diǎn)擊樹節(jié)點(diǎn)的children數(shù)組，加載數(shù)據(jù)到其下
        const currentNode = this.treeData.find(item => item.key === key);
        if (currentNode.children && currentNode.children.length) {
          resolve(currentNode.children);
        } else {
          resolve([]);
        }
      }
    },
    /** 樹結(jié)構(gòu)數(shù)組轉(zhuǎn)換成扁平數(shù)組 */
    treeArrayToArray(tree) {
      const arr = [];
      function recursiveFunction(tree) {
        for (let i = 0; i < tree.length; i++) {
          // 給所有沒有子節(jié)點(diǎn)的節(jié)點(diǎn)添加leaf屬性，該屬性用來取消左側(cè)小箭頭
          if (!(tree[i].children && tree[i].children.length)) {
            tree[i].leaf = true;
          }
          arr.push(tree[i]);
          if (tree[i].children && tree[i].children.length) {
            recursiveFunction(tree[i].children);
          }
        }
      }
      recursiveFunction(tree);
      return arr;
    },
    /** 獲取點(diǎn)擊樹節(jié)點(diǎn)的數(shù)據(jù)，進(jìn)行渲染右側(cè)頁(yè)面等操作 */
    handleNodeClick(data) {
    },
  },

以上就是關(guān)于“el-tree樹組件懶加載怎么實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。