当前位置: 首页 > 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场景编…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...