elementUI tree回显数据总结

项目中需要使用tree来展示、提交、回显省市区信息。因为数据库的省市区信息总共有两千多笔，因此一次全部显示可能会出现渲染时间长的问题，最初考虑到使用懒加载，但回显出现问题（技术有限，没有找到其他人分享的经验），最终将需求拆分成省，省市，市区三个小模块，直接请求数据库。以下为相关页面和代码

    
我的省
    

    
                                
    
    
        
        选省
    
    

 

在回显数据操作中找了好多方法

第一种：通过属性default-checked-keys设值,这个属性的数据只能用在标签中设值，想通过动态更新数组的数据来实现回显是行不通的；

第二种：通过先获取tree的展示数据，然后延时使用setCheckedKeys方法来设值；

reShow1() {
    this.getPrnvcList();
    setTimeout(() => {
        this.$refs['lazyTree'].setCheckedKeys(this.provinceIds);
    }, 2000);
}

            getPrnvcList() { 
                this.area1 = [];
                queryPrvncList([]).then(res => {
                    console.log("更新省份树！");
                    res.data.forEach(item => { 
                         var obj = {
                            "id": item.provinceId,
                            "name": item.provinceName,
                            }
                           this.area1.push(obj) ;
                        //console.log(this.area1);
                    })
                })  
            },

其中回显数据会因数据数据量和浏览器渲染速度而产生差异，目前我在火狐和谷歌浏览器对比后延时设值两秒比较合适。

参考链接：https://blog.csdn.net/lzg603117228/article/details/106552478