Vue+Element中Table懶加載，新增、刪除操作后手動更新

Vue+Element中Table懶加載，新增、刪除操作后手動更新

今天開發一個自動分類管理系統中行業類型管理，使用table tree 進行節點懶加載，遇到的問題是：使用load 進行懶加載后在tableData中是取不到子節點數據，所以在為某個節點新增了子節點后無法實現刷新，想到使用刷新真個tableData但是感覺不對（刷新整個源數據太浪費資源了，而且體驗極差）, 直接上代碼吧

html 代碼

          <el-table :data="tableData" style="width: 100%" row-key="id" lazy border :height="tableHeight" :load="loadNextNode" ref="tableDom" :expand-row-keys="idArr" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="typeName" label="分類名稱" width="180">
            </el-table-column>
            <el-table-column prop="refUserId" label="創建人">
            </el-table-column>
            <el-table-column prop="dateCreate" label="創建日期" width="180">
            </el-table-column>
            <el-table-column prop="updateCreate" label="修改日期" width="180">
            </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-button type="text" size="small">編輯行業類型</el-button>
                <el-button type="text" size="small" @click="crateIndustryType(scope.row)">創建行業類型</el-button>
                <el-button type="text" size="small" style="color:#ff3e3e" @click="delIndustry(scope.row)">刪除</el-button>
              </template>
            </el-table-column>
          </el-table>
  <industry-dialog :industryForm="industryForm" :dialogOptType="dialogOptType" @formCommit="getFormCommit" ref="industryDialog"></industry-dialog>

javascript 代碼

     data() {
      return {
        tableData: [],
        loadNodeMap: new Map()
      }
    },
    methods: {
      // 懶加載
      loadNextNode(tree, treeNode, resolve) {
        const id = tree.id;
        // 將當前操作報錯起來
        this.loadNodeMap.set(id, {tree, treeNode, resolve})
        let url = `/industryType/findListByPid?id=${tree.id}`;
        this.$post(url).then(res => {
          if (res.data.code === 200) {
            resolve(res.data.results)
            // 如果數據為空 設置hasChildren為false
            if (res.data.results.length <= 0) tree.hasChildren = false;
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch(err => {
          console.log(err);
        });
      },
      /** * 創建行業類型,打開對話框 * @param currRow{Object}選擇的行對象 * @desc isNode 為行業與類型的標識【0 代表行業 1 代表類型】 * pid 為父節點id */
      crateIndustryType(currRow) {
        this.selectCurrRow = currRow;
        // 新增數據省略。。。。 我使用的是dialog 提示新增 類型
      },
      /** * 獲取子組件返回的數據 將其提交到后台保存，同時更新當前子節點 * @param commitData 表單數據 * @param dialogOptType 操作類型 【create-industry 創建行業、create-type創建行業類型、edit 編輯行業類型】 * */
      getFormCommit(commitData, dialogOptType) {
        this.$post('/industryType/save', industryData).then(res => {
          if (res.data.code === 200) {
            this.loadText = msg.add_msg_succ;
            this.loadState = 'success';
            this.$refs.load.manualLoadClose();
            this.$refs.industryDialog.closeDialog();
            if (dialogOptType === 'create-type') {
              this._reRenderChildrenNodeAfterAdd(res.data.results)
            } else {
              this._tableDataLoading()
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch(err => {
          this.loadText = msg.err_msg;
          this.loadState = 'fail';
        });
      },

      /** * 在新增類型后根據selectCurrRow的id 獲取loadNodeMap 中對應的 * resolve 進行子節點刷新操作 * 刷新table 列表 *@param callbackRow{Array} 執行新增后返回當前節點的子節點數組 * */
      _reRenderChildrenNodeAfterAdd(callbackRow) {
        const {id} = this.selectCurrRow;
        if (this.loadNodeMap.has(id)) {
          const {tree, treeNode, resolve} = this.loadNodeMap.get(id);
          this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, id, []);
          resolve(callbackRow)
        } else {
          this.selectCurrRow.hasChildren = true
        }
      },
    }

操作截圖

第一次寫博客請多多擔待

---