element 樹表格懶加載刷新頁面

首先，懶加載時候會遇到增刪改子節點。

但是，子節點增刪改后不刷新視圖（重新加載數據不更新頁面）。

而且，element沒給出刷新視圖的方法。

所以，需要手動定義樹表格的刷新方法。

引用，https://blog.csdn.net/Unrequited66/article/details/106757052/。

源碼解釋請看以上鏈接，我也是先看到上面的鏈接再去看源碼的。。

 

 

首先定義表格樹結構懶加載：

 <el-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        row-key="areaCode"
        border
        lazy
        :load="loadChildTree"
        :tree-props="{ children: 'children', hasChildren: 'issubordinate' }"
      >
        <el-table-column
          prop="areaName"
          width="250px"
          label="地區名稱"
        ></el-table-column>
 </el-table>

注意看    ref="multipleTable"  這個是element定義在this.$refs中的一個鍵名，有很大用一定要

 

其次在data中定義一個map對象用來保存當前已經打開過的懶加載數據，以及在methods中定義個懶加載的方法，方法中要給map添值：

data(){
　　return{
　　　　loadNodeMap: new Map() /**保存懶加載節點 */,
　　}
},
methods:{
　　loadChildTree(tree, treeNode, resolve) {

        // 懶加載樹級

        this.loadNodeMap.set(tree.areaCode, { tree, treeNode, resolve })

        findAreaListReq({ areaCode: tree.areaCode }).then((res) => {

          if (res !== undefined) {

            if (res.code === 200) {

              res.data.forEach((item) => {

                item.fullName = [tree.fullName, item.areaName].join('/')

              })

              resolve(res.data)

            } else {

              this.$message({

                type: 'error',

                message: res.message,

              })

            }

          }

        })

      }

　　}

 

重要的環節，自定義增刪改查的邏輯函數：

首先要明白一點，懶加載出來的數據element給我們保存在哪里了，

經過一步步查詢，首先排除掉了第一次獲取根樹的結構中，也就是那個根數據。

后面查詢百度以及分析源碼，發現他保存在了以下的結構中，可以自行console.log以下的數據，其中$refs后面那個參數是上面自己定義的：

this.$refs.multipleTable.store.states.lazyTreeNodeMap

 

邏輯處理，當刪除、新增、修改時我們都要重新刷新視圖，而且要通過父節點進行接口調用以及視圖刷新，

其中新增要考慮到，當A節點以下沒新增前有節點和沒有節點時的處理：當有的時候和平時一樣，只要刷新一下A節點的子樹就可以了，但是當之前沒有節點時，涉及到A節點也要重新刷新，不然會沒有那個懶加載的標

修改無需考慮，重新刷新即可

刪除需要考慮到，當A節點以下刪除后有節點和沒有節點時的處理：當有的時候和平時一樣，只要刷新一下A節點的子樹就可以了，但是當之前沒有節點時，涉及到A節點也要重新刷新，不然會依然存在那個懶加載的標

||

||

但是刪除的那個邏輯好像不用考慮，測試到他不需要重新刷新A的父節點的樹

代碼如下：

_reRenderChildrenNodeAfterAdd(areaCode, type = 'other') {
        if (type === 'add') {
          // 如果該節點已經打開過了
          if (this.$refs.multipleTable.store.states.lazyTreeNodeMap[areaCode]) {
            this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              areaCode
            ] = this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              areaCode
            ].map((item) => {
              if (item.areaCode === this.addAreaData.supperCode) {
                item.issubordinate = true
              }
              return item
            })
          } else {
            this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              this.addAreaP.supperCode
            ] =         
        this.$refs.multipleTable.store.states.lazyTreeNodeMap[
              this.addAreaP.supperCode
            ].map((item) => {
              if (item.areaCode === this.addAreaData.supperCode) {
                item.issubordinate = true
              }
              return item
            })
          }
        }
        if (this.loadNodeMap.has(areaCode)) {
          const { tree, treeNode, resolve } =     
      },        

其中：

addAreaP是當前的節點也就是A節點，

supperCode是A節點的父節點ID，

areaCode是A節點的ID，

新增的時候調用：

this._reRenderChildrenNodeAfterAdd(

                      this.addAreaData.supperCode,

                      'add'

                    )

其他的不用傳'add'