vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?

简介: vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?

需要实现的懒加载回显效果

比如:后端返回数据 广东省/广州市/天河区440000000000/440100000000/440106000000,需要我们自动展开到天河区的下一级,效果如下

代码实现

我的实现思路就是拿到 440000000000/440100000000/440106000000 每一层级的数据,然后组成一个树。

这里接口 getAreaList 返回的数据格式如下:

[
  {
    areaCode: "440106000000",
    areaLevel: "4",
    areaName: "天河区",
    areaSeq: "5",
    childNum: 21,
    parentAreaSeq: "xxx"
  }
]

组件试下如下:

<template>
    <div class="cascader-lazy">
        <h2>需要回显的地区:广东省/广州市/天河区</h2>
        <h3>需要回显的地区对应的编码:440000000000/440100000000/440106000000</h3>
        <el-cascader ref="cascaderLazy" :options="dataList" :props="props" v-model="areaList" />
    </div>
</template>
<script>
import axios from "axios";
export default {
    name: "CascaderLazy",
    data() {
        return {
            areaList: [],
            dataList: [],
            props: {
                value: "areaCode",
                label: "areaName",
                lazy: true,
                lazyLoad: this.lazyLoad
            }
        };
    },
    mounted() {
        this.areaList = ["440000000000", "440100000000", "440106000000"];
        this.loadOptions(this.areaList);
    },
    methods: {
        // 获取数据
        getAreaList(parentAreaSeq) {
            return new Promise(async (resolve, reject) => {
                try {
                    const response = await axios.get("xxxx", {
                        params: {
                            parentAreaSeq: parentAreaSeq
                        }
                    });
                    resolve(
                        response.data.data.map((el) => {
                            el.leaf = el.childNum === 0;
                            return el;
                        })
                    );
                } catch (error) {
                    console.error(error);
                    reject();
                }
            });
        },
        // 遍历一级选择框,把二级选择框的数据放在一级的children属性上
        async loadOptions(areaList) {
            // 先初始调用一次
            let tempArr = [];
            let initRes = await this.getAreaList();
            tempArr.push(initRes);
            // 然后遍历 areaList 找到对应的 areaSeq 获取地区列表
            for (let i = 0; i < areaList.length; i++) {
                if (areaList.length > 0) {
                    let areaSeq = "";
                    areaSeq = tempArr[i].filter((el) => el.areaCode === areaList[i]).map((el) => el.areaSeq)[0];
                    let res = await this.getAreaList(areaSeq);
                    tempArr.push(res);
                }
            }
            // 先加一个最后层级的地区用于展示,最后在删掉
            if (tempArr[areaList.length][0]) {
                areaList.push(tempArr[areaList.length][0].areaCode);
            }
            // 从后面开始遍历组成一个树
            for (let len = tempArr.length - 1; len >= 0; len--) {
                if (len - 1 < 0) break;
                // 给当前areaCode添加children
                tempArr[len - 1].forEach((item) => {
                    if (item.areaCode === areaList[len - 1]) {
                        item.children = tempArr[len];
                    }
                });
            }
            this.dataList = tempArr[0];
            // 删掉最后选中的
            this.$nextTick(() => {
                areaList.pop();
                // 点击自动下拉出来
                this.$refs.cascaderLazy.$el.click();
            });
        },
        async lazyLoad(node, resolve) {
            let nodes = [];
            if (node.level !== 0 && node.data) {
                nodes = await this.getAreaList(node.data.areaSeq);
            }
            resolve(nodes);
        }
    }
};
</script>


目录
相关文章
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
2天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
2天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
17天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
3天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
4天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
4天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
9天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发