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.rhkb.cn/news/322329.html

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

相关文章

贪心算法（活动选择、分数背包问题）

贪心算法（活动选择、分数背包问题）

一、贪心算法 贪心算法是指&#xff1a;在对问题求解时&#xff0c;总是做出在当前看来是最好的选择&#xff0c;而不从整体最优考虑&#xff0c;做出的仅是在某种意义上的局部最优解。 …
阅读更多...
从零开始的软件测试学习之旅(九)jmeter直连数据库及jmeter断言,关联

从零开始的软件测试学习之旅(九)jmeter直连数据库及jmeter断言,关联

jmeter直连数据库及断言,关联 jmeter直连数据库步骤jmeter断言jmeter逻辑控制器if控制器ForEach控制器循环控制器 Jmeter关联Jmeter关联XPath提取器Jmeter关联正则表达式提取器二者比较跨线程组关联 每日复习 jmeter直连数据库 概念 这不叫直连:Jmeter -> java/python 提供的…
阅读更多...
【linuxC语言】fcntl和ioctl函数

【linuxC语言】fcntl和ioctl函数

文章目录 前言一、功能介绍二、具体使用2.1 fcntl函数2.2 ioctl函数 三、拓展&#xff1a;填写arg总结 前言 在Linux系统编程中&#xff0c;经常会涉及到对文件描述符、套接字以及设备的控制操作。fcntl和ioctl函数就是用来进行这些控制操作的两个重要的系统调用。它们提供了对…
阅读更多...
JavaEE 多线程详细讲解（1）

JavaEE 多线程详细讲解（1）

1.线程是什么 &#xff08;shift F6&#xff09;改类名 1.1.并发编程是什么 &#xff08;1&#xff09;当前的CPU&#xff0c;都是多核心CPU &#xff08;2&#xff09;需要一些特定的编程技巧&#xff0c;把要完成的仍无&#xff0c;拆解成多个部分&#xff0c;并且分别让…
阅读更多...
Leetcode—933. 最近的请求次数【简单】

Leetcode—933. 最近的请求次数【简单】

2024每日刷题&#xff08;128&#xff09; Leetcode—933. 最近的请求次数 实现代码 class RecentCounter { public:RecentCounter() {}int ping(int t) {q.push(t);while(t - 3000 > q.front()) {q.pop();}return q.size();} private:queue<int> q; };/*** Your Re…
阅读更多...
嵌入式学习69-C++（Opencv）

嵌入式学习69-C++（Opencv）

知识零碎&#xff1a; QT的两种编译模式 1.debug 调试模式 …
阅读更多...
c 双向链表

c 双向链表

图片 #include <stdio.h> #include <stdlib.h> #include <string.h>int main(void){ struct film{char name[20];int id;struct film *pre; //前向指针struct film *next; //后向指针 };struct film *headNULL;struct film *ls,*lspre,*work;in…
阅读更多...
rabbitmq集群搭建失败解决

rabbitmq集群搭建失败解决

1. 现象 1. 三台机器都已经修改hosts&#xff0c;各个节点ping节点名正常 2. erlang.cookie各节点值一样 执行下面步骤加入失败 rabbitmqctl stop_app # 停止rabbitmq服务 rabbitmqctl reset # 清空节点状态 rabbitmqctl join_cluster rabbitrabbitmq3 rabbitmqctl start_ap…
阅读更多...
通过AOP实现项目中业务服务降级功能

通过AOP实现项目中业务服务降级功能

最近项目中需要增强系统的可靠性&#xff0c;比如某远程服务宕机或者网络抖动引起服务不可用&#xff0c;需要从本地或者其它地方获取业务数据&#xff0c;保证业务的连续稳定性等等。这里简单记录下业务实现&#xff0c;主要我们项目中调用远程接口失败时&#xff0c;需要从本…
阅读更多...
全栈开发之路——前端篇（5）组件间通讯和接口等知识补充

全栈开发之路——前端篇（5）组件间通讯和接口等知识补充

全栈开发一条龙——前端篇 第一篇&#xff1a;框架确定、ide设置与项目创建 第二篇&#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇&#xff1a;setup语法&#xff0c;设置响应式数据。 第四篇&#xff1a;数据绑定、计算属性和watch监视 辅助文档&…
阅读更多...
游戏辅助 -- 三种分析角色坐标方法（CE、xdbg、龙龙遍历工具）

游戏辅助 -- 三种分析角色坐标方法（CE、xdbg、龙龙遍历工具）

所用工具下载地址&#xff1a; https://pan.quark.cn/s/d54e7cdc55e6 在上次课程中&#xff0c;我们成功获取了人物对象的基址&#xff1a;[[[0xd75db8]1C]28]&#xff0c;而人物血量的地址则是基址再加上偏移量278。 接下来&#xff0c;我们需要执行以下步骤来进一步操作&a…
阅读更多...
牛客题-链表内区间反转

牛客题-链表内区间反转

链表内区间反转 这是代码 typedef struct ListNode listnode; struct ListNode* reverseBetween(struct ListNode* head, int m, int n ) {if (head NULL) {return NULL;}listnode* findhead head;listnode* findtail head;listnode* prev NULL;int count1 m;int count2…
阅读更多...
Mysql总结

Mysql总结

推荐你阅读 互联网大厂万字专题总结 Redis总结 JUC总结 操作系统总结 JVM总结 Mysql总结 互联网大厂常考知识点 什么是系统调用 CPU底层锁指令有哪些 AQS与ReentrantLock原理 旁路策略缓存一致性 Java通配符看这一篇就够 基础篇 Mysql 的一条语句是如何执行的 Server 层是上层…
阅读更多...
C++学习笔记——对仿函数的理解

C++学习笔记——对仿函数的理解

文章目录 思维导图仿函数出现的逻辑仿函数使用上的巧妙 仿函数的本质仿函数的优势仿函数语法的巧妙 思维导图 仿函数出现的逻辑 我们在学习stack时会遇到一些新的问题&#xff0c;这些问题需要我们使用非类型模板参数去解决&#xff0c;即我们需要在设计类时需要有一个途径去快…
阅读更多...
C++反射之检测struct或class是否实现指定函数

C++反射之检测struct或class是否实现指定函数

目录 1.引言 2.检测结构体或类的静态函数 3.检测结构体或类的成员函数 3.1.方法1 3.2.方法2 1.引言 诸如Java, C#这些语言是设计的时候就有反射支持的。c没有原生的反射支持。并且&#xff0c;c提供给我们的运行时类型信息非常少&#xff0c;只是通过typeinfo提供了有限的…
阅读更多...
【练习3】

【练习3】

1.将二叉搜索树转为排序的双向链表 (好久没看数据结构&#xff0c;忘完了&#xff0c;学习大佬的代码&#xff09; class Solution { public:Node* prenullptr,*headnullptr; //pre为每次遍历时的前一个节点&#xff0c;head记录头节点Node* treeToDoublyList(Node* root) {if…
阅读更多...
Tomcat 优化

Tomcat 优化

在目前流行的互联网架构中&#xff0c;Tomcat在目前的网络编程中是举足轻重的&#xff0c;由于Tomcat的运行依赖于JVM&#xff0c;从虚拟机的角度把Tomcat的调整分为外部环境调优 JVM 和 Tomcat 自身调优两部分。 一、JVM组成 1. JVM 组成 JVM组成部分 类加载子系统: 使用Ja…
阅读更多...
第 8 章 电机测速(自学二刷笔记)

第 8 章 电机测速(自学二刷笔记)

重要参考&#xff1a; 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 8.3.3 电机测速01_理论 测速实现是调速实现的前提&#xff0c;本节主要介绍AB相增量式编码器测速原理。 1.概…
阅读更多...
JavaScript异步编程——04-同源和跨域

JavaScript异步编程——04-同源和跨域

同源和跨域 同源 同源策略是浏览器的一种安全策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口完全相同。 跨域问题的解决方案 从我自己的网站访问别人网站的内容&#xff0c;就叫跨域。 出于安全性考虑&#xff0c;浏览器不允许ajax跨域获取…
阅读更多...
轻量级密码算法可用于哪些应用场景？

轻量级密码算法可用于哪些应用场景？

轻量级密码算法&#xff0c;以其设计简洁、计算效率高、资源消耗低的特点&#xff0c;成为密码学中一个重要的分支。这些算法特别适用于资源受限的环境&#xff0c;能够在保证安全性的同时&#xff0c;满足对处理能力、存储空间和能耗的限制。 轻量级密码算法特点及应用 近年来…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023