欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)

 更新時(shí)間:2023年03月10日 10:43:09   作者:永遠(yuǎn)不會(huì)太晚  
本文主要介紹了el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實(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樹無法判斷有沒有子節(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è)頁面等操作 */
    handleNodeClick(data) {
    },
  },

到此這篇關(guān)于el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)的文章就介紹到這了,更多相關(guān)el-tree樹組件懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 如何在Vue 3中擴(kuò)展Vue Router鏈接詳解

    如何在Vue 3中擴(kuò)展Vue Router鏈接詳解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • Vue中如何實(shí)現(xiàn)proxy代理

    Vue中如何實(shí)現(xiàn)proxy代理

    本篇文章主要介紹了Vue中如何實(shí)現(xiàn)proxy代理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例

    vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例

    今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue請(qǐng)求按順序執(zhí)行的示例詳解

    vue請(qǐng)求按順序執(zhí)行的示例詳解

    我們有時(shí)候會(huì)碰到這種情況,需要連續(xù)發(fā)送兩個(gè)請(qǐng)求,第二個(gè)請(qǐng)求需要用第一個(gè)請(qǐng)求的某個(gè)返回值作為參數(shù)來作為第二個(gè)請(qǐng)求的請(qǐng)求參數(shù),這篇文章主要介紹了vue請(qǐng)求如何按順序執(zhí)行,需要的朋友可以參考下
    2023-12-12
  • vue 將頁面公用的頭部組件化的方法

    vue 將頁面公用的頭部組件化的方法

    本篇文章主要介紹了vue 將頁面公用的頭部組件化的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue封裝axios的兩種方法總結(jié)

    vue封裝axios的兩種方法總結(jié)

    在不同的前端項(xiàng)目中使用相同的axios封裝有利于保持一致性,有利于數(shù)據(jù)之間的傳遞和處理,本文主要提供兩種對(duì)axios進(jìn)行封裝的思路,有需要的小伙伴可以參考一下
    2023-10-10
  • vue中view-model雙向綁定基礎(chǔ)原理解析

    vue中view-model雙向綁定基礎(chǔ)原理解析

    這篇文章主要介紹了vue中view-model雙向綁定基礎(chǔ)原理,文中給大家介紹了vue雙向綁定的原理總結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue生成gzip壓縮包部署到nginx的示例

    vue生成gzip壓縮包部署到nginx的示例

    vue 生成gzip壓縮包部署到nginx服務(wù)器,如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器,這樣就能加快網(wǎng)站資源的加載速度,這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下
    2022-12-12
  • SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決

    SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解

    這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • vue cli 3.0 搭建項(xiàng)目的圖文教程

    vue cli 3.0 搭建項(xiàng)目的圖文教程

    這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程,本文通過圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05

最新評(píng)論