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 => {})}
    }

复制代码

若有问题，欢迎探讨，若是满意，请手动点赞，谢谢！🙏