elementUI tree回显数据总结

最新推荐文章于 2024-08-08 18:31:29 发布

李堇

最新推荐文章于 2024-08-08 18:31:29 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_31172555/article/details/118568354

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<div style="display: flex;margin-top: 20px;align-items: center;">
    <div class="contentTltle">我的省</div>
    <div class="contentValue1">
    <span class="inputSpan" style="width:14vw">
        <el-input type="textarea" :rows="2" size="medium" v-model="provinceNames"                                            placeholder="请选择省" disabled autosize suffix-icon="el-icon-location-information">                        </el-input>
    </span>
    <el-popover id="ep1" title="省市区" width="300" trigger="click"  height="80px" placement="right-end" popper-class="ep">
        <template>
            <el-tree height="80px" ref="lazyTree" :data="area1" :props="props" show-checkbox node-key="id"   @check-change="handleCheckChange"> </el-tree>
        </template>
        <el-button slot="reference" type="primary" @click="reShow1">选省</el-button>
    </el-popover>
    </div>
</div>

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

第一种：通过属性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