element-UI 樹形控件懶加載模式下動態更新

需求場景及遇到的問題：產品要求展現有層級關係的一個列表，第一反應是樹形結構，element有直接封裝好的，拿來用就能夠了，el-tree直接講後臺返回的數據按照層級結構處理好傳進去就能夠了。可是有時候考慮到數據量會很大，看了下element文檔，用懶加載能夠處理大數據問題，可是用懶加載對數據進行更新的時候，已經展開的節點更新後會回到初始狀態，用戶體驗很差，查了一下，element本身封裝的doCreateChildren能夠實現展開相應節點的問題。核心在於點擊新增後獲取當前節點信息保存起來而後在更新完成後展開該節點。

下面貼代碼

html部分
<el-tree    
  class="place-tree"     
  :data="rootData"     
  :props="defaultProps"     
  lazy     
  accordion     
  :load="loadNode"     
  updateKeyChildren     
  node-key="id"     
  ref="tree"     
  @node-click="handleNodeClick">     
  <span class="tree-node el-tree-node__label tree-node-slot" 
        slot-scope="{ node, data }">        
        <span class="tree-node-left-box">            
           <span :title="node.label">{{ node.label }}</span>
        </span>        
        <span class="tree-node-right-opt">
            <i class="btn el-icon-circle-plus-outline" 
               title="新增" @click.stop="append(node, data)"></i>            
            <i class="btn icon-danger el-icon-edit" 
               title="修改" @click.stop="update(node, data)"></i>            
            <i class="btn icon-danger el-icon-delete" 
               title="刪除" @click.stop="remove(node, data)"></i>        
         </span>     
    </span>
</el-tree>
script
data(){
    return{
        currentData:'',
        currentNode:'',
        change_id:'',
        get_data:{
            id:'',
        }
    }
}
methods:{
    //獲取父節點下子節點函數
    loadNode(node,resolve){
        ajax_get_getChildren(param).then(res => {
              if (res.code == '1') {
                return resolve(res.data);
              }         
        }).catch(err => {})    
     }
    //新增
    append(node,data) {
        this.currentData = data;
        this.currentNode = node;
        this.ajaxType = "add";
        this.dialogTitle = "新增";
        this.formData = this.$deepClone(formData_addPlace);
        this.qnDialogShow = true;
    },
    //刪除
    remove(node, data) {
       this.$qnConfirm({ 
               title:'警告', 
               info:'請確認是否要刪除此場所', 
      }).then(()=>{ 
          this.currentData = node.parent.data; 
          this.currentNode = node.parent; 
          let obj = { 
            fireUnitId:this.get_data.fireUnitId, 
            id:data.id  
           }          
           ajax_post_delPlace(obj).then(res=>{
              if(res.code == '1'){ 
                 this.$message({ message: "刪除成功", type: "success" }); 
                 this.get_children();
              }                
            }).catch(err => {console.log("ajax_err:", err);});      
        })    
    },
    //修改
    update(node, data) {
      this.change_id = data.id 
      this.currentData = node.parent.data;
      this.currentNode = node.parent;
        let obj = {       
           fireUnitId : this.get_data.fireUnitId,
          id:data.id      
        }
      ajax_get_getPlaceInfo(obj).then(res=>{
        //獲取詳情渲染表單
        if(res.code == '1'){
          this.formData[0].value = res.data.name;
          if(res.data.picPath){
            this.currentPlaceNode.picPath=res.data.picPath;
            let arr = res.data.picPath.split('/')
            this.file_title = arr[arr.length-1]
           }        
         }      
      }).catch(err=>{console.log('ajax_err:',err)})
      this.ajaxType = "edit";
      this.dialogTitle = "修改";
      this.formData = this.$deepClone(formData_addPlace);
      this.qnDialogShow = true;
    },    
    save_data() {
      this.$validator.validateAll().then(async result => {
        if (result) {          
            let obj = this.formDataDeal(this.formData);//將數據整理成後端須要格式
            obj.fireUnitId = this.get_data.fireUnitId;
            let body_params = {}          
            body_params.params = obj;
            if(this.formfile){
                for(let i in obj){
                  if(obj[i])this.formfile.append(i,obj[i])            
                }            
                body_params.params = {};
                body_params.data = this.formfile;
             }
             if (this.ajaxType == "add") {
                  ajax_post_addPlace(body_params).then(res => {
                      if (res.code == "1") {
                        this.$message({ message: "新增成功", type: "success" });
                        this.qnDialogShow = false;
                        this.get_children();
                       }
                   }).catch(err => {console.log("ajax_err:", err)});         
              }else if(this.ajaxType == "edit"){
                    ajax_post_modifyPlace(body_params).then(res => {
                       if (res.code == "1") {
                          this.$message({ message: "修改爲功", type: "success" });
                          this.qnDialogShow = false;                  
                          this.get_children();
                       }              
                     }).catch(err => {console.log("ajax_err:", err)});          
              }        
         }      
      });
    },
    //獲取子節點  核心函數//
    get_children(){
      ajax_get_getChildren(this.get_data).then(res => {
          if (res.code == "1") {
            this.currentNode.childNodes = [];
            this.currentNode.doCreateChildren(res.data);
          }        
       }).catch(err => {})}
    }

複製代碼

若有問題，歡迎探討，若是滿意，請手動點贊，謝謝！🙏