欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 明星 > VUE3 el-cascade组件实现省市区动态加载,完整代码!

VUE3 el-cascade组件实现省市区动态加载,完整代码!

2024/10/24 9:27:28 来源:https://blog.csdn.net/qq_43532275/article/details/139994745  浏览:    关键词:VUE3 el-cascade组件实现省市区动态加载,完整代码!

实现动态加载省市区的功能,由于数据量有点多,所以第一次查询出来所有的省,点击省的时候调用接口查询下面的市,点击市的时候在调用接口显示下面的区。官网写的很不详细,泛泛而谈,以下提供完整代码。下面是前端页面效果图:

<template>

<el-cascader :props="props" />

</template>

<script lang="ts" setup>
import type { CascaderProps } from 'element-plus'
const props: CascaderProps = {lazy: true,async lazyLoad(node, resolve) {
//查询省市区调用的接口看后端如何设计,我这里是所有的接口调用同一个,每次调用传父节点的id,代码为//了好理解,省市区调用的接口我写了三个const level = node.levelconst parentId = node.valuelet options;if(level==0){let data = await getProvince()options = data.map(item => ({value: item.name,label: item.value,leaf: level >= 2,}))}else if(level==1){let data = await getCity({provinceId:parentId})options = data.map(item => ({value: item.name,label: item.value,leaf: level >= 2,}))}else if(level == 2){let data = await getDistrict({cityId:parentId})options = data.map(item => ({value: item.name,label: item.value,leaf: level >= 2,}))}resolve(options)}
}
</script>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com