当前位置: 首页 > news >正文

element + vue3,级联选择器实现省市区

 由于es6支持哈希,所以数据量只要不太大,就不需要对el-cascader进行点击后在调接口出现下一级,很简单的就是直接获取所有数据。

<template><div><el-cascader :modelValue="modelValue" :props="innerProps" :options="options" @change="handleChange" filterable:show-all-levels="showAllLevels" :disabled="disabled" :placeholder="placeholder" :clearable="clearable"style="width:100%" @blur="onBlur" @focus="onFocus" @close="handleClose" @visible-change="onVisibleChange" /><!-- --- {{ modelValue }} --></div>
</template><script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, watch, onBeforeUnmount } from 'vue'
import type { CascaderProps } from 'element-plus'
import * as api from "./api.js";const props = defineProps({modelValue: {type: Array,default: []},// 是否支持清空选项clearable: {type: Boolean,default: true,},// 是否多选// multiple: {//     type: Boolean,//     default: false,// },// 指定某省,传入该自治区的areacodedesignation: {type: String,default: '',},// 仅显示最后一级showAllLevels: {type: Boolean,default: true,},// 是否禁用disabled: {type: Boolean,default: false,},// 输入框占位文本placeholder: {type: String,default: '',},// 是否选择任意一级选项,还是最后叶子结点checkStrictly: {type: Boolean,default: true,},// 次级菜单的展开方式,click和hoverexpandTrigger: {type: String,default: 'click',},// 多选个数限制selectNummultipleSelectNum: {type: Number,default: 1,},// 省市县乡镇,显示层级,默认为2,到区县。0为省,1为市,2为区县,3为乡镇level: {type: Number,default: 2,},
})let options: any = ref([])  //树
const watchArr = ref([])onMounted(() => {// 获取全量数据getAllData()
})//重新定义一个值来接受prop
const isMultiple = ref(false)//因为prop中的值非动态响应,所以需要通过watch监听,immediate 初始化时接收父组件中的传值
watch(() => props.multipleSelectNum, () => {// isMultiple.value = props.multipleSelectNum;if(props.multipleSelectNum > 1) {isMultiple.value = true}console.log(isMultiple.value,props.multipleSelectNum,'---props.multipleSelectNum;');}, {immediate: true
})onBeforeUnmount(() => {})const emit = defineEmits(['update:modelValue', 'change'])
const handleChange = (e: any, e2: any) => {watchArr.value = eemit('change', e)emit('update:modelValue', e)
}async function getAllData() {let res = await api.SearchAdministrativeDivisions({queryArea: props.designation,level: props.level})options.value = res.data
}function onFocus(e: any) { }
async function onBeforeFilter(e: any) {let res = await api.SearchAdministrativeDivisions({queryArea: e})const fn = (arr: any[]) => {arr.forEach((item, index) => {if (item.children && item.children.length) {item.children = fn(item.children)} else {if (item.children) delete item.children}})return arr}// console.log(options, '---options');options.value = fn(res.data)
}
// const isMultiple = ref(false)
const innerProps: CascaderProps = {checkStrictly: props.checkStrictly,// lazy: true,value: 'areaCode',label: 'name',multiple: isMultiple.value, //modifyexpandTrigger: props.expandTrigger,
}
const handleClose = () => { }
const onBlur = () => {// console.log('---onBlur');
}
const onVisibleChange = (e: any) => {// if (props.modelValue.length < props.multipleSelectNum && props.multiple == true) {if (props.modelValue.length < props.multipleSelectNum && isMultiple.value == true) { //modifyfunction onRabbit(list: any) {list.forEach((el: any) => {if (el.children && el.children.length > 0) {el.children = onRabbit(el.children);}el.disabled = false;el.isFlag = false});return list;}const newList = onRabbit(options.value);options.value = newList;}
}
// 监听
watch(() => watchArr.value,(newVal, oldVal) => {// if (props.multiple == true) {if (isMultiple.value == true) {   //modify// console.log(oldVal,`watch监听变化前的数`)// console.log(newVal, `watch监听变化后的数据`)if (newVal.length >= props.multipleSelectNum) {function onRabbit(list: any) {list.forEach((el: any) => {if (el.children && el.children.length > 0) {el.children = onRabbit(el.children);}newVal.forEach((v: any) => {if (v[v.length - 1] != el.areaCode) {if (el.isFlag) {} else {el.disabled = trueel.isFlag = true}} else {el.disabled = falseel.isFlag = true}})});return list;}const newList = onRabbit(options.value);options.value = newList;} else {function onRabbit(list: any) {list.forEach((el: any) => {if (el.children && el.children.length > 0) {el.children = onRabbit(el.children);}el.disabled = false;el.isFlag = false});return list;}const newList = onRabbit(options.value);options.value = newList;}}},{immediate: true, // 立即执行deep: true // 深度监听}
)
</script><style></style>

相关文章:

element + vue3,级联选择器实现省市区

由于es6支持哈希&#xff0c;所以数据量只要不太大&#xff0c;就不需要对el-cascader进行点击后在调接口出现下一级&#xff0c;很简单的就是直接获取所有数据。 <template><div><el-cascader :modelValue"modelValue" :props"innerProps"…...

程序员的护城河-并发编程

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…...

外卖小程序系统:数字化餐饮的编码之道

在当今数字化时代&#xff0c;外卖小程序系统成为了餐饮业的一项技术巨制。这个系统不仅提供了便捷的点餐体验&#xff0c;更通过先进的技术手段&#xff0c;实现了高效订单处理、实时配送追踪以及个性化推荐。让我们深入了解外卖小程序系统的技术魔法&#xff0c;一起揭秘数字…...

单链表相关面试题--1.删除链表中等于给定值 val 的所有节点

/* 解题思路&#xff1a;从头节点开始进行元素删除&#xff0c;每删除一个元素&#xff0c;需要重新链接节点 */ struct ListNode* removeElements(struct ListNode* head, int val) {if(head NULL)return NULL;struct ListNode* cur head;struct ListNode* prev NULL;while…...

一生一芯18——Chisel模板与Chisel工程构建

Chisel模板链接如下&#xff1a; 链接: https://pan.baidu.com/s/1DNDKpz5VnTxPgoZBBOd-Ww?pwdrevg 提取码: revg Chisel转Verilog模板如下&#xff1a; 链接: https://pan.baidu.com/s/1T9JQL5BccxqI4bscfU-JyA?pwd7rw2 提取码: 7rw2 以下使用sbt作为构建工具 Chisel项目构…...

ES6 class类

基本介绍 1. constructor constructor()方法是类的默认方法&#xff0c;通过new命令生成对象实例时&#xff0c;自动调用该方法。 一个类必须有constructor()方法&#xff0c;如果没有显式定义&#xff0c;一个空的constructor()方法会被默认添加。如&#xff1a; class Po…...

Java的IO流-打印流

打印流 PrintStream public void println&#xff08;&#xff09;自动换行 PrintWriter package com.itheima.println;import java.io.FileInputStream; import java.io.PrintStream; import java.io.PrintWriter;public class Test2 {public static void main(String[] arg…...

如何使用$APPEALS法,分析用户期待?

$APPEALS分析法是一种用于分析用户期待和需求的方法&#xff0c;它可以帮助企业全方位多角度地了解客户对产品的期望&#xff0c;有助于企业多维度有侧重地调整市场规划和产品改进策略&#xff0c;帮助企业打造优势产品&#xff0c;提高市场竞争力。 下面是使用$APPEALS分析法来…...

南京工程学院数据结构考试纲要

...

C++中将 sizeof() 用于类

C中将 sizeof() 用于类 您知道&#xff0c;通过使用关键字 class 声明自定义类型&#xff0c;可封装数据属性和使用数据的方法。运算符 sizeof( )用于确定指定类型需要多少内存&#xff0c;单位为字节。这个运算符也可用于类&#xff0c;在这种情况下&#xff0c;它将指出类声…...

Android studio访问选程https接口(.crt handshake)

如果服务器是https的&#xff0c;访问受限怎么办&#xff1f;有两种方法&#xff0c;一种是接受一切证书个人官方正式非正式&#xff0c;当然这样就牺牲了安全性&#xff0c;网上方法很多&#xff0c;我现在教大家如何去验证crt文件 首先服务器是https的&#xff0c;必然有几个…...

设计模式(一)-设计原则(1)

六大设计原则 1、单一职责原则 特点&#xff1a; 类和方法属性等&#xff0c;都应当遵守单一职责。尽可能保持统一性&#xff0c;单一性。 含义&#xff1a; &#xff08;1&#xff09;统一性&#xff0c;定义一个模块就必须要符合所有对象的行为特征。比如声明一个 Animal 类…...

Linux|僵死进程

1.僵死进程产生的原因或者条件: 什么是僵死进程? 当子进程先于父进程结束,父进程没有获取子进程的退出码,此时子进程变成僵死进程. 简而言之,就是子进程先结束,并且父进程没有获取它的退出码; 那么僵死进程产生的原因或者条件就是:子进程先于父进程结束,并且父进程没有获取…...

JDY蓝牙注意事项

波特率设置&#xff1a;9600&#xff0c;不接受115200&#xff0c;或者38400. 不同于WiFi测试&#xff0c;jdy蓝牙不接受AT"指令&#xff0c;可以使用“ATVERSION"指令测试 安信可公司的那个蓝牙指令在这里没有用&#xff0c;不知道是不是生产的公司不一样...

服务器IPMI管理操作

简介&#xff1a;智能平台管理界面&#xff08;IPMI&#xff0c;Intelligent Platform Management Interface)是管理基于 Intel 结构的企业系统中所使用的外围设备采用的一种工业标准&#xff0c;用户可以利用IPMI监视服务器的物理健康特征&#xff0c;如温度、电压、风扇工作状…...

自动驾驶学习笔记(九)——车辆控制

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo Beta宣讲和线下沙龙》免费报名—>传送门 文章目录 前言 控制器设计 比例积分微分控制 线性…...

HTML5学习系列之项目实战1

HTML5学习系列之项目实战1 前言代码记录问题总结 前言 学习记录 代码 <div id"player"><audio id"musicbox"></audio><div id"controls" class"clearfix controls"><div id"play" class"…...

git 提交成了LFS格式,如何恢复

平常习惯使用sourceTree提交代码&#xff0c;某次打开时弹出了一个【是否要使用LFS提交】的确认弹窗&#xff0c;当时不知道LFS是什么就点了确认&#xff0c;后续提交时代码全变成了这个样子 因为是初始化的项目首次提交&#xff0c;将近四百个文件全被格式化成了这个样子&…...

【ISP图像处理】Demosaic去马赛克概念介绍以及相关方法整理

1. 基本定义 使用彩色滤光器阵列(CFA)的数码相机需要一个去马赛克程序来形成完整的RGB图像。一般的相机传感器都是采用彩色滤光片阵列(CFA)放置在光感测单元上&#xff0c;在每个像素处仅捕获三种原色成分中的一种。 去马赛克方法主要关注于复原非常规区域&#xff0c;比如边缘…...

单图像3D重建AI算法综述【2023】

计算机视觉是人工智能的一个快速发展的领域&#xff0c;特别是在 3D 领域。 本概述将考虑一个应用任务&#xff1a;2D 和 3D 环境之间的转换。 在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...