vue+element tree懶載入更新資料的範例程式碼

2022-09-26 14:02:35

使用element tree實現懶載入，更新某一節點的資料

1.tree 懶載入

只需要在el-tree標籤上面新增lazy，load屬性，load的接收是一個函數。這裡貼上官網給出的方法

<el-tree
   :data="treeList"
   ref="tree"
   class="vue-tree"
   lazy
   :load="loadNode"
   :highlight-current="true"
   :node-key="nodeKey"
   @node-click="nodeClick"
   :expand-on-click-node="false"
   :props="defaultProps"
 ></el-tree>

2.load方法使用

// 懶載入獲取樹形結構
loadNode(node, resolve) {
//呼叫介面時，我們的需求是第一級傳參為0，後面為當前節點的唯一表示id，可以根據需求而定
// node.level為0時，就是tree的第一級
 const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid
 getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => {
   resolve(
     data.data.map(item => {
       return {
         ...item,
         leaf: !item.hasChildren // 此引數用來判斷當前節點是否為葉子節點
       }
     })
   )
 })
},

3.leaf的作用

當我們使用的tree懶載入，只會載入到我們請求的那一層級，所以當我們在葉子節點請求時，請求完不會出現資料，這樣的體驗就不是很好，這個時候就需要藉助tree的props裡面isLeaf的設定方法了

defaultProps: {
  children: 'children',
  label: 'spaceName',
  isLeaf: 'leaf'
}

加上此欄位，就可以清晰的看出哪些節點為葉子節點了

4.我們一旦使用懶載入的方式的話

那我們在對tree介面進行增刪改查時，及時重新整理資料時，就會造成我們還需要從新獲取介面

其實如果我們仔細觀察的話，我們會發現已經請求過的節點，我們收起，再次開啟是不會請求介面的，這樣的話，我們可以這麼做

/**
 * 單獨重新整理節點
 * guid: 當前節點的父級唯一標識節點
 */
refreshTreeNode(guid) {
  let node = this.$refs.tree.getNode(guid)
  if (node) {
    node.loaded = false
    node.expand() // 主動呼叫展開節點方法，重新查詢該節點下的所有子節點
  }
},

Vue Element Ui 樹形表懶載入新增、修改、刪除等操作後區域性資料更新

前言

element 樹表懶載入在每次對錶格進行修改刪除等操作後需要重新整理表格資料時都需要重新請求，在逐增展開載入，這樣對使用者來說不太友好所以我們稍微解決一些

第一步：定義一個Map

用來儲存表格懶載入每次展開時所點選的當前行{tree,treeNode,resolve}

data(){
    return{
        maps: new Map(), // 先在你的data內搞一個map用於儲存接下來必要的資料
    }
}

第二步：在load方法內使用map

每次點選展開load方法都會返回{tree,treeNode,resolve}，定義好map後在每一次執行load方法呼叫介面成功返回資料後將load返回的引數{tree,treeNode,resolve}儲存到map中去，用於後續操作中使用

   load(tree, treeNode, resolve) {
      if (treeNode) {
         // 這是我的方法和介面不必照搬只需要將this.maps.set()這一句放到相應位置即可
        selectBom({
          code: tree.code,
          ifMba: this.ifMba,
        }).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
            this.maps.set(tree.code, { tree, treeNode, resolve }); 
            // 上面這一句是將你每一次展開的節點存到你剛剛在data內定義的map內，其他的不重要
            // tree.code是唯一值
          }
        });
      }
    },

第三步：查詢map中對應資料

已經將每次展開load返回的{tree,treeNode,resolve}儲存到map中後，我們現在就需要取出來再傳給load方法了，呼叫refreshLoadTree方法時需要給它傳一個你所操作節點父節點ID，他會通過這個ID去map中檢索出相對應的資料然後再呼叫load方法傳給它以達到區域性更新的目的

    refreshLoadTree(pId) {
      // 根據更改節點的父ID取出相應資料
      const { tree, treeNode, resolve } = this.maps.get(pId);
       
      this.$set(
        // 不要忘記在你的table上寫ref
        this.$refs.LoadTable.store.states.lazyTreeNodeMap, 
        pId,
        []
      );
      if (tree) {
        // 將取出對應資料再傳給load方法
        this.load(tree, treeNode, resolve); 
      }
    },

第四步：呼叫 refreshLoadTree方法

只需要在你修改或刪除等操作介面返回成功時呼叫並傳一個操作節點父ID即可實現區域性資料更新

//最後只需要在你做修改刪除或者其他操作的地方呼叫即可
//括號內傳操作節點的父節點（如果自己拿不到可以在介面成功時讓後端返回）
this.refreshLoadTree(res.data.code);

這是基礎版本，因為本人專案原因會再次之上改動許多並未附上全部（僅作為記錄）

到此這篇關於vue+element tree懶載入更新資料的文章就介紹到這了,更多相關vue element tree懶載入內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！