element-plus el-cascader 懒加载实现-省市区街道选择及回显

在这里插入图片描述

大概思路：

  1. 准备一个接口可以通过父Id,查询到下一级省市区街道的信息；如下方的getRegionListOne
  2. 确定后端的数据结构，需要在created里边处理数据回显逻辑
  3. el-cascader接收的数据格式是[‘’,‘’,‘’];后端的数据格式多为[{provinceId: ‘’, regionId: ‘’, cityId: ‘’}]
  4. 可以通过设置comType，来确定是省市区还是省市区街道，组件内完成逻辑处理。

直接上代码

<template><div class="areaLazy"><el-cascaderv-model="currentChoose"v-bind="_options":options="addressList":disabled="_options.disabled"@change="handleChange"/></div>
</template><script>
export default {name: "addresscascaderlazy",
};
</script><script setup>
import { ref, computed, watch } from "vue";
import API from "@/api";const emits = defineEmits(["update:modelValue"
]);const props = defineProps({disabled: {//禁用type: Boolean,required: false,default: false,},options: {type: Object,default: () => {},},modelValue: {type: [Array, Object],default: () => ([]),},
});
let id = 0;
// 设置option默认值，如果传入自定义的配置则合并option配置项
const _options = computed(() => {const option = {name: "multipartFiles",comType: "provinceCityCountryRegion",props: {lazy: true,lazyLoad(node, resolve) {const { level, value } = node; // 获取当前node对象中的level, value属性getArea(level, value, resolve)},}};option.disabled = props.disabled;return Object.assign(option, props.options);
});
const levelTag = {"provinceCityCountryRegion": 3,"provinceCityCountry": 2,"provinceCity": 1,
}
const currentChoose = ref([]);
const addressList = ref([]);
const addressOrigin = ref({}); // 省市区数据const handleChange = (val) => {console.log('handleChange', val)if (!val.length) {emits('update:modelValue', val)return}if (_options.value?.props?.multiple) {const arr = []val.forEach(item => {const obj = {}obj.provinceId = item[0]obj.provinceName = addressOrigin.value[0][item[0]]obj.cityId = item[1]obj.cityName = addressOrigin.value[1][item[1]]obj.regionId = item[2]obj.regionName = addressOrigin.value[2][item[2]]obj.streetId = val[3]obj.streetName = addressOrigin.value[3][val[3]]arr.push(obj)})emits('update:modelValue', arr)} else {const obj = {}obj.provinceId = val[0]obj.provinceName = addressOrigin.value[0][val[0]]obj.cityId = val[1]obj.cityName = addressOrigin.value[1][val[1]]obj.regionId = val[2]obj.regionName = addressOrigin.value[2][val[2]]obj.streetId = val[3]obj.streetName = addressOrigin.value[3][val[3]]emits('update:modelValue', obj)}
}const getArea = (level, value, resolve) => {API.getRegionListOne({parentId: value}).then(async (res) => {addressOrigin.value[level] = {}const nodes = res.result.map(item => {addressOrigin.value[level][item.id] = item.namereturn {  value: String(item.id),label: item.name,leaf: level >= levelTag[_options.value?.comType],}})resolve(nodes)})
}const created = () => {if (!props.modelValue) {return []}if (props.modelValue instanceof Array) {currentChoose.value = props.modelValue.map(item => {if (_options.value.comType === "provinceCityCountryRegion") {return [ item.provinceId, item.cityId, item.regionId, item.streetId ]}if (_options.value.comType === "provinceCityCountry") {return [ item.provinceId, item.cityId, item.regionId ]}return [ item.provinceId, item.cityId ]})} else {if (_options.value.comType === "provinceCityCountryRegion") {currentChoose.value = [props.modelValue.provinceId, props.modelValue.cityId, props.modelValue.regionId, props.modelValue.streetId]return}if (_options.value.comType === "provinceCityCountry") {currentChoose.value = [props.modelValue.provinceId, props.modelValue.cityId, props.modelValue.regionId, props.modelValue.streetId]return}currentChoose.value = [props.modelValue.provinceId, props.modelValue.cityId]}
}// 省市区
// getaddressList();
watch(()=>props.modelValue, (val) => {created();
})</script><style lang="less">
.areaLazy {.el-input__inner {min-width: 350px;}
}
</style>

再附一个非懒加载形式的

<template><div class="areaUnit"><el-cascaderv-model="currentChoose"v-bind="_options":options="addressList":disabled="_options.disabled"@change="handleChange"/></div>
</template><script>
export default {name: "addresscascader",
};
</script><script setup>
import { ref, computed, watch } from "vue";
import API from "@/api";const emits = defineEmits(["update:modelValue"
]);const props = defineProps({disabled: {//禁用type: Boolean,required: false,default: false,},options: {type: Object,default: () => {},},modelValue: {type: [Array, Object],default: () => ([]),},
});// 设置option默认值，如果传入自定义的配置则合并option配置项
const _options = computed(() => {const option = {name: "multipartFiles",comType: "provinceCityCountry",};option.disabled = props.disabled;return Object.assign(option, props.options);
});const currentChoose = ref([]);
const addressList = ref([]);
const addressOrigin = ref({});
// 处理省市区数据结构
const handleBase = (list, childrenList, stringBan) => {return new Promise((resolve) => {const address = []if (childrenList) {for (const key in list) {const children = childrenList.filter(i => String(i.value).substring(0, stringBan) === String(key).substring(0, stringBan));address.push({value: key,label: list[key],children})}} else {for (const key in list) {address.push({value: key,label: list[key]})}}resolve(address)})
}// 获取省市区
const getaddressList = () => {API.getRegionList().then(async (res) => {const { province_list, city_list, county_list } = res.result;addressOrigin.value = { province_list, city_list, county_list }if (_options.value.comType === "provinceCityCountry") {const countyAddress = await handleBase(county_list)const cityAddress = await handleBase(city_list, countyAddress, 4)addressList.value = await handleBase(province_list, cityAddress, 2)}if (_options.value.comType === "provinceCity") {const cityAddress = await handleBase(city_list)addressList.value = await handleBase(province_list, cityAddress, 2)}})
}
const handleChange = (val) => {if (!val.length) {emits('update:modelValue', val)return}if (_options.value?.props?.multiple) {const arr = []val.forEach(item => {const obj = {}obj.provinceId = item[0]obj.provinceName = addressOrigin.value.province_list[item[0]]obj.cityId = item[1]obj.cityName = addressOrigin.value.city_list[item[1]]obj.regionId = item[2]obj.regionName = addressOrigin.value.county_list[item[2]]arr.push(obj)})emits('update:modelValue', arr)} else {const obj = {}obj.provinceId = val[0]obj.provinceName = addressOrigin.value.province_list[val[0]]obj.cityId = val[1]obj.cityName = addressOrigin.value.city_list[val[1]]obj.regionId = val[2]obj.regionName = addressOrigin.value.county_list[val[2]]emits('update:modelValue', obj)}
}const created = () => {if (!props.modelValue) {return []}if (props.modelValue instanceof Array) {currentChoose.value = props.modelValue.map(item => {if (_options.value.comType === "provinceCityCountry") {return [ item.provinceId, item.cityId, item.regionId ]}return [ item.provinceId, item.cityId ]})} else {if (_options.value.comType === "provinceCityCountry") {currentChoose.value = [props.modelValue.provinceId, props.modelValue.cityId, props.modelValue.regionId]} else {currentChoose.value = [props.modelValue.provinceId, props.modelValue.cityId]}}
}// 省市区
getaddressList();
watch(()=>props.modelValue, (val) => {console.log('modelValue', val)created();
})
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/8177.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于随机森林与支持向量机的高光谱图像分类（含python代码）

基于随机森林与支持向量机的高光谱图像分类（含python代码）

目录 一、背景 二、代码实现 三、项目代码 一、背景 基于深度学习的教程&#xff08;卷积神经网络&#xff09;详见&#xff1a;基于卷积神经网络的高光谱图像分类详细教程&#xff08;含python代码&#xff09;-CSDN博客 在高光谱图像分类领域&#xff0c;随机森林&#…
阅读更多...
FPGA第一篇，FPGA现场可编程门阵列，从0开始掌握可编程硬件开发（FPGA入门指南）

FPGA第一篇，FPGA现场可编程门阵列，从0开始掌握可编程硬件开发（FPGA入门指南）

简介&#xff1a;FPGA全称Field-Programmable Gate Array&#xff0c;是一种可编程逻辑器件&#xff0c;它通过可编程的逻辑单元和可编程的连接网络实现了灵活的硬件实现。与固定功能的集成电路&#xff08;ASIC&#xff09;相比&#xff0c;FPGA具有更高的灵活性和可重新配置性…
阅读更多...
未授权访问：Redis未授权访问漏洞

未授权访问：Redis未授权访问漏洞

目录 1、漏洞原理 2、环境搭建 3、未授权访问 4、利用redis未授权写入weshell 5、利用redis未授权反弹shell 6、利用redis未授权实现免密登录 防御手段 从这篇文章开始我就要开始学习各种未授权访问的知识和相关的实操实验了&#xff0c;一共有好多篇&#xff0c;内容主…
阅读更多...
美港通正规炒股市场恒生科指半日跌近2% 大型科技股集体下行

美港通正规炒股市场恒生科指半日跌近2% 大型科技股集体下行

查查配5月7日电 7日,港股主要股指回调。截至午盘,恒生指数跌0.85%,恒生科技指数跌1.98%。 美港通证券以其专业的服务和较低的管理费用在市场中受到不少关注。该平台提供了实盘交易、止盈止损、仓位控制等功能,旨在为投资者提供更为全面的投资体验。 来源:Wind 盘面上,零售、软…
阅读更多...
OC5864 0.6A输出 60V输入 500KHZ DCDC降压转换IC

OC5864 0.6A输出 60V输入 500KHZ DCDC降压转换IC

一级代理 技术支持 提供样品测试 Tel&#xff1a;18028786817 简介 OC5864是一款内置功率MOSFET的单片降压型开关模式转换器。OC5864在5.5~60V宽输入电源范围内实现0.6A峰值输出电流&#xff0c;并且具有出色的线电压和负载调整率。 OC5864采用PWM电流模工作模式&#xff0c;…
阅读更多...
stm32单片机遇到的问题（持续更新）

stm32单片机遇到的问题（持续更新）

flymcu下载问题一直显示连接&#xff0c;实际是连接不上 参考&#xff0c;软件一键下载电路等 使用flymcu下载程序过程中&#xff0c;检测两个地方**&#xff0c;第一&#xff0c;两个boot引脚在下载和硬件运行不同的连接方式** BOOT1x&#xff0c;BOOT00&#xff1a;最常用的模…
阅读更多...
kubectl_进阶_网络

kubectl_进阶_网络

网络 容器网络发展到现在&#xff0c;形成了两大阵营&#xff0c;就是 Docker 的 CNM 和 Google、CoreOS、Kuberenetes 主导的 CNI。首先明确一点&#xff0c;CNM 和 CNI 并不是网络实现&#xff0c;他们是网络规范和网络体系&#xff0c;从研发的角度他们就是一堆接口&#x…
阅读更多...
CentOS操作

CentOS操作

1.如何修改主机名 方法一&#xff1a; 修改命令&#xff1a;hostnamectl set-hostname 主机名 查看命令&#xff1a;hostname 方法二和方法三都是永久改变主机名&#xff0c;需要密码验证 方法二 修改命令&#xff1a;nmcli general hostname 主机名 查看命令&#xff…
阅读更多...
三维点云处理-聚类（下）

三维点云处理-聚类（下）

接着前一部分数据聚类方法的介绍&#xff0c;由于K-means和GMM方法都是基于欧式距离信息处理的&#xff0c;两者分别以圆形和椭圆形来作为数据的聚类分割方式&#xff0c;这种情况下会导致环形图和月牙图数据分割不准确&#xff0c;因此进一步的介绍一种谱聚类方法&#xff0c;…
阅读更多...
感知机导论

感知机导论

综述 每一个算法都是为了解决一类问题&#xff0c;或者说是解决之前算法存在的缺陷而产生的,感知机&#xff0c;在这里就起到了一个很大的作用&#xff0c;它向后续的很多算法暴露出来了很多它存在的缺陷。所以我们后面要学习的很多算法都是在某种程度上解决了感知机暴露出来的…
阅读更多...
静态NAT

静态NAT

哈喽&#xff01;各位小伙伴们好久不见&#xff0c;最近由于工作的原因断更了一段时间&#xff0c;不过最近我都会把这些给补上&#xff0c;今天我们来学习一个简单的知识——静态NAT转换。 第一章 什么是NAT技术&#xff1f; 网络地址转换技术NAT&#xff08;Networ…
阅读更多...
致远M3 log 敏感信息泄露漏洞

致远M3 log 敏感信息泄露漏洞

文章目录 免责漏洞描述漏洞原理影响版本漏洞复现修复方法 免责 只为学习与交流&#xff0c;若利用做一切违法乱纪的事与本人无关 漏洞描述 致远M3是一个企业移动业务管理平台&#xff0c;全面覆盖各种工作场景&#xff0c;通过智能化的办公和业务场景融合&#xff0c;为企业…
阅读更多...
【数据库原理及应用】期末复习汇总高校期末真题试卷07

【数据库原理及应用】期末复习汇总高校期末真题试卷07

试卷 一、填空题&#xff08;每空1分&#xff0c;共10分&#xff09; 1.数据库管理系统在外模式、模式和内模式这三级模式之间提供了两层映象&#xff0c;其中 映象保证了数据的逻辑独立性。 2. 数据模型通常由 、数据操作和完整性约束三部分组…
阅读更多...
java项目跑不起来 端口已被使用

java项目跑不起来 端口已被使用

背景 Springboot项目跑不起来&#xff0c;原因端口被占用。 解决方法 在 Windows 环境下&#xff0c;你可以按照以下步骤来查看某个端口被占用的情况&#xff0c;并停止相应的进程&#xff1a; 查看所有端口占用情况&#xff1a; 按下 Win R 键&#xff0c;打开运行窗口。…
阅读更多...
Python调用讯飞星火大模型v3.5接口

Python调用讯飞星火大模型v3.5接口

在国外&#xff0c;ChatGPT已经成为AI模型行业的大佬&#xff0c;但是国内如果需要使用&#xff0c;会有各种限制&#xff0c;本文介绍如何使用国内的模型。 在国内&#xff0c;讯飞星火大模型是一个非常优秀的中文预训练模型。本文将介绍如何使用Python调用讯飞星火大模型接口…
阅读更多...
优思学院｜六西格玛中的普氏矩阵（Pugh Matrix）是什么？

优思学院｜六西格玛中的普氏矩阵（Pugh Matrix）是什么？

决策矩阵&#xff08;Pugh Matrix&#xff09;&#xff0c;也可称作普氏矩阵&#xff0c;它是由设计工程师斯图尔特普发展并得名。这是一个基于标准的矩阵&#xff0c;用于帮助团队从几个备选方案中定量确定给定问题的“最佳”解决方案。普矩阵通常用于产品设计&#xff0c;但实…
阅读更多...
java spring 09 Bean的销毁过程 上 在docreatebean中登记要销毁的bean

java spring 09 Bean的销毁过程 上 在docreatebean中登记要销毁的bean

1.Bean销毁是发送在Spring容器关闭过程中的 AnnotationConfigApplicationContext context new AnnotationConfigApplicationContext(AppConfig.class);UserService userService (UserService) context.getBean("userService");userService.test();// 容器关闭cont…
阅读更多...
使用STM32CubeMX进行STM32F4的定时器配置

使用STM32CubeMX进行STM32F4的定时器配置

目录 1. Pin脚2. 配置2.1 时钟配置2.2 RCC配置2.3 Timer配置2.4 输出文件 3. 代码3.1 使能定时器3.2 回调函数 1. Pin脚 2. 配置 2.1 时钟配置 timer3时钟挂载在APB1上&#xff1a; 时钟配置如下&#xff1a; 外部使用8MHz晶振 开启内部16MHz晶振 使用锁相环 开启最高100MHz。…
阅读更多...
React18+TS+NestJS+GraphQL 全栈开发在线教育平台

React18+TS+NestJS+GraphQL 全栈开发在线教育平台

高质量平台级应用流行全栈技术实用职场技巧通用面试策略React18TSNestJSGraphQL 全栈开发在线教育平台&#xff08;完结&#xff09; 黑石老师&#xff0c;大厂技术专家&#xff0c;深耕前后端十多年。发现很多的前端同学都面临如下的职业困扰&#xff1a;没有能拿的出手的面试…
阅读更多...
HTML批量文件上传2——进度条显示

HTML批量文件上传2——进度条显示

作者&#xff1a;私语茶馆 非常多的云应用中需要上传文本&#xff0c;包括图片&#xff0c;文件等等&#xff0c;这些批量文件上传&#xff0c;往往涉及到进度条显示&#xff0c;多文件上传等&#xff0c;这里分享一个非常好的案例&#xff0c;来自BootStrapfriendly.com&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023