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://xiahunao.cn/news/3015352.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Postman轻松签名，让SHA256withRSA保驾护航！

Postman轻松签名，让SHA256withRSA保驾护航！

前言 在接口测试中&#xff0c;我们经常需要对请求进行签名&#xff0c;以保证数据的安全性。而SHA256withRSA是一种较为常见的签名算法&#xff0c;它可以使用私钥对数据进行签名&#xff0c;使用公钥进行验签。 但是&#xff0c;实现该算法签名可能会涉及到一些繁琐的操作&…
阅读更多...
利用生成式AI重新构想ITSM的未来

利用生成式AI重新构想ITSM的未来

对注入 AI 的生成式 ITSM 的需求&#xff0c;在 2023 年 Gartner AI 炒作周期中&#xff0c;生成式 AI 达到预期值达到顶峰后&#xff0c;三分之二的企业已经将生成式 AI 集成到其流程中。 你问为什么这种追求&#xff1f;在预定义算法的驱动下&#xff0c;IT 服务交付和管理中…
阅读更多...
如何把一个PDF文档每两页合并为一页？跟我学，5秒搞定！

如何把一个PDF文档每两页合并为一页？跟我学，5秒搞定！

想要将两张PDF的内容合并到一张A4纸上显示。 这需要用到PDF编辑软件&#xff0c;在迅捷PDF编辑器中的“打印”功能里进行设置。 下面给大家演示一下具体怎么操作&#xff1a; 01.打开迅捷PDF编辑器&#xff0c;导入PDF文件&#xff0c;找到左上角【打印】功能。 02.在弹出…
阅读更多...
服务器2080ti驱动的卸载与安装

服务器2080ti驱动的卸载与安装

服务器2080ti驱动的卸载与安装 前言1、下载驱动2、驱动卸载与安装2.1 卸载原来驱动2.2 安装新驱动 3、查看安装情况 前言 安装transformers库&#xff0c;运行bert模型时出错&#xff0c;显示torch版本太低&#xff0c;要2.0以上的&#xff0c;所以更新显卡驱动&#xff0c;重…
阅读更多...
黑马点评项目总结

黑马点评项目总结

登录 基于session登录 短信验证码登录 配置登录拦截器 向 Spring MVC 框架中添加拦截器&#xff0c;LoginInterceptor 是一个自定义的拦截器&#xff0c;用于拦截用户的登录请求。 excludePathPatterns这一句是设置拦截器需要放行的请求路径列表。 "/user/code", …
阅读更多...
Java | Leetcode Java题解之第67题二进制求和

Java | Leetcode Java题解之第67题二进制求和

题目&#xff1a; 题解&#xff1a; class Solution {public String addBinary(String a, String b) {StringBuffer ans new StringBuffer();int n Math.max(a.length(), b.length()), carry 0;for (int i 0; i < n; i) {carry i < a.length() ? (a.charAt(a.leng…
阅读更多...
基于云制造的智能工厂简单介绍

基于云制造的智能工厂简单介绍

基于云制造的智能工厂是利用云制造服务平台&#xff0c;以制造资源层、现场控制层、车间执行层、企业管理层、平台应用层、企业协同的业务需求和集成协作为牵引&#xff0c;综合基于云制造服务平台的应用模式&#xff0c;同时考虑智能工厂整体安全&#xff0c;构建基于云制造的…
阅读更多...
Gradio之blocks灵活搭建页面

Gradio之blocks灵活搭建页面

这里写目录标题 搭建一个UI界面搭建上半部分的框架比例调节以及其他效果搭建下半部分左边部分搭建下半部分右边部分拓展-CSS的应用 使用标签搭建第二个页面示例 补充AccordionGroup() 搭建一个UI界面 搭建上半部分的框架 如下图&#xff0c;我们想要基本还原下图右边的UI界面…
阅读更多...
【优选算法】——Leetcode——202—— 快乐数

【优选算法】——Leetcode——202—— 快乐数

目录 1.题目 2. 题⽬分析: 3.简单证明&#xff1a; 4. 解法&#xff08;快慢指针&#xff09;&#xff1a; 算法思路&#xff1a; 补充知识&#xff1a;如何求⼀个数n每个位置上的数字的平⽅和。 总结概括 5.代码实现 1.C语言 2.C 1.题目 202. 快乐数 编写一个算法来…
阅读更多...
论文复现和点评《基于随机森林模型的个人信用风险评估研究》

论文复现和点评《基于随机森林模型的个人信用风险评估研究》

作者Toby&#xff0c;来源公众号&#xff1a;Python风控模型&#xff0c;论文复现和点评《基于随机森林模型的个人信用风险评估研究》 最近Toby老师看到一篇论文热度比较高&#xff0c;下载量有665次&#xff0c;论文标题是《基于随机森林模型的 个人信用风险评估研究》 论文篇…
阅读更多...
陪诊系统|陪诊小程序成品|陪诊系统功能

陪诊系统|陪诊小程序成品|陪诊系统功能

随着人们对健康的日益关注以及医疗技术的不断进步&#xff0c;陪诊小程序应运而生&#xff0c;通过提供陪同就医、医疗服务和健康管理等功能为患者和家庭成员提供了更多的便利和选择。本文将分析陪诊小程序的关键功能&#xff0c;以便更好地理解其在医疗领域的作用。 在陪诊小程…
阅读更多...
练习项目后端代码解析注解篇（annotation）

练习项目后端代码解析注解篇（annotation）

前言 本来想从接口处入手的&#xff0c;但是一下看到接口里几十个方法&#xff0c;眼睛有点抗拒&#xff0c;想想还是先看作者写的自定义注解吧。 项目里有三个自定义注解&#xff1a; 分别是AccessLimit注解、OperationLogger注解、VisitLogger注解 AccessLimit注解 这是一…
阅读更多...
Summer ‘24来啦！15个最热门的功能抢先看！

Summer ‘24来啦！15个最热门的功能抢先看！

Salesforce Summer 24即将发布&#xff01;本篇文章我们将深入了解Summer 24最热门的声明性功能。 01 自动化Lightning应用程序 新的自动化Lightning应用程序中包含所有与自动化相关的内容。访问该应用程序的用户可以在主应用程序中看到Flow、错误信息和其他基于社区的链接。…
阅读更多...
自动驾驶主流芯片及平台架构（一）

自动驾驶主流芯片及平台架构（一）

零部件成本下降、中低端车竞争加剧&#xff0c;推动ADAS渗透率在中国市场快速提升&#xff0c;自主品牌ADAS装配量大幅提升 零部件成本下降、中低端车竞争加剧&#xff0c;推动ADAS渗透率在中国市场快速提升&#xff0c;自主品牌ADAS装配量大幅提升。5年前在一些高端车型上才有…
阅读更多...
【JVM】类加载机制及双亲委派模型

【JVM】类加载机制及双亲委派模型

目录 一、类加载过程 1. 加载 2. 连接 a. 验证 b. 准备 c. 解析 3. 初始化 二、双亲委派模型 类加载器 双亲委派模型的工作过程 双亲委派模型的优点 一、类加载过程 JVM的类加载机制是JVM在运行时&#xff0c;将 .class 文件加载到内存中并转换为Java类的过程。它…
阅读更多...
【硬核科普】一文读懂生成对抗网络GAN

【硬核科普】一文读懂生成对抗网络GAN

0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见解及成果&#xff0c;但是内容可能存在不准确的地方。如果发现文中错误&#xff0c;希望批评指正&#xff0c;共同进步。 本文基于Ian在2014年发表在NIPS的论…
阅读更多...
GDPU 天码行空11

GDPU 天码行空11

&#xff08;一&#xff09;实验目的 1、掌握JAVA中IO中各种类及其构造方法&#xff1b; 2、重点掌握IO中类所具有的IO操作方法&#xff1b; 3、熟悉软件中登录模块的开发方法&#xff1b; 4、掌握IO中读写常用方法。 5、进一步熟悉正则规则的使用方法。 &#xff08;二&…
阅读更多...
GT资源-Clock资源

GT资源-Clock资源

一、Transmitter 时钟分布 XCLK&#xff1a;在使用TX buffer的模式下&#xff0c;XCLK来源于TXOUTCLK。在使用TX bypassing的模式下XCLK来源于TXUSERCLK。TXUSRCLK是GTX/GTH中PCS的内部逻辑时钟。TXUSRCLK2是GT Transceiver 用户侧逻辑时钟。 TXUSRCLK与TXUSRCLK2的关系 FPGA …
阅读更多...
聚类分析：使用R语言对Iris数据集进行K均值聚类

聚类分析：使用R语言对Iris数据集进行K均值聚类

引言 聚类分析是一种常用的无监督学习技术&#xff0c;旨在将数据集中的样本分成具有相似特征的组。K均值聚类是其中一种常见的方法&#xff0c;它通过将数据点划分为K个簇&#xff0c;并使每个数据点与其所属簇的中心点距离最小化来实现聚类。本文将介绍如何使用R语言执行K均…
阅读更多...
奥威-金蝶BI现金流量表模板，可借鉴、可套用

奥威-金蝶BI现金流量表模板，可借鉴、可套用

企业现金流一旦出了问题都是大问题&#xff0c;会直接影响到企业的日常运作&#xff0c;甚至直接关系到企业能不能继续存活&#xff0c;因此现金流量表是企业财务分析中重要报表之一&#xff0c;也是企业监控财务监控情况的重要手段之一。那么这么重要的一份现金流量表该怎么做…
阅读更多...
最新文章

Copyright @ 2022~2023