(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束
(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束
-
需求:按勾选的顺序给后端传值
-
难点:在 Element UI 的 el-cascader 组件中,默认的行为是根据数据的层级结构来显示选项,用户的选择也会基于这种层级结构,el-cascader 本身并不直接支持自定义的显示顺序。
效果:

实现:
// html
<el-cascaderv-model="selectedOptions":options="options":props="props"clearable>
</el-cascader>// js
export default {data(){return {selectedOptions:[],// 绑定的数组sortSelectedOptions:[],// 排好序的数组// props: { multiple: true },// 原始获取到的value是数字,不方便对比props: { multiple: true, value: 'label', label: 'label' },// 指定value值取labeloptions: [{value: 1,label: '东南',children: [{value: 2,label: '上海',children: [{ value: 3, label: '普陀' },{ value: 4, label: '黄埔' },{ value: 5, label: '徐汇' }]}, {value: 7,label: '江苏',children: [{ value: 8, label: '南京' },{ value: 9, label: '苏州' },{ value: 10, label: '无锡' }]}, {value: 12,label: '浙江',children: [{ value: 13, label: '杭州' },{ value: 14, label: '宁波' },{ value: 15, label: '嘉兴' }]}]}, {value: 17,label: '西北',children: [{value: 18,label: '陕西',children: [{ value: 19, label: '西安' },{ value: 20, label: '延安' }]}, {value: 21,label: '新疆维吾尔族自治区',children: [{ value: 22, label: '乌鲁木齐' },{ value: 23, label: '克拉玛依' }]}]}]}}
},
// 监听绑定数组
watch:{selectedOptions: {handler(newVal, oldValue) {if (newVal.length > oldValue.length) {// 找到新增的项const newItems = this.findNewItems(oldValue, newVal)// 添加到排序数组中this.sortSelectedOptions.push(...newItems)}if (newVal.length < oldValue.length) {// 找到删除的项const newItems = this.findNewItems(newVal, oldValue)// 从排序数组中过滤掉被删除的项this.sortSelectedOptions = this.sortSelectedOptions.filter(item => {return !newItems.map(e => JSON.stringify(e)).includes(JSON.stringify(item))})}console.log('this.sortSelectedOptions', this.sortSelectedOptions)},deep: true}
},methods:{findNewItems(oldList, newList) {// 创建一个映射表来快速检查旧列表中的项const oldItemsMap = new Map()for (const item of oldList) {// 使用JSON.stringify作为唯一标识符(注意:如果子数组顺序重要且可能不同,这种方法可能不适用)oldItemsMap.set(JSON.stringify(item), true)}// 遍历新列表,检查哪些项不在旧列表中const newItems = []for (const item of newList) {if (!oldItemsMap.has(JSON.stringify(item))) {newItems.push(item)}}return newItems},
}相关文章:
(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束
(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束 需求:按勾选的顺序给后端传值 难点:在 Element UI 的 el-cascader 组件中,默认的行为是根据数据的层级结构来显示选项,用户的选择也会基于这种层级结构,el-…...
Redis进阶(四):哨兵
为了解决主节点故障,需要人工操作切换主从的情况;因此需要一种方法可以自动化的切换:哨兵的引入大大改变这种情况。 哨兵的基本概念 自动切换主从节点 哨兵架构 1、当一个哨兵节点发现主节点挂了的时候,还需要其他节点也去检测一…...
蓝屏事件:网络安全的启示
“微软蓝屏”事件暴露了网络安全哪些问题? 近日,一次由微软视窗系统软件更新引发的全球性“微软蓝屏”事件,不仅成为科技领域的热点新闻,更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件,源于美国电脑安全技…...
技术方案评审原则
系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言技术方案评审原则1.理论突破阶段2.技术突破阶段3.工程化阶段自动驾驶行业的技术方案分析前言 认知有限,望大家多多包涵,有什么问题也希望能够与大…...
117页PPT埃森哲-物流行业信息化整体规划方案
一、埃森哲-物流行业信息化整体规划方案 资料下载方式,请看每张图片右下角信息 埃森哲在物流行业信息化整体规划项目中的核心内容,旨在帮助物流企业通过信息技术的应用实现业务流程的优化、运营效率的提升以及市场竞争力的增强。以下是埃森哲在此类项目…...
百度网盘不下载怎么直接打印文件?
在数字化时代,百度网盘作为我们存储和分享文件的重要工具,承载了大量的文档、图片和资料。然而,当需要打印这些文件时,很多用户会面临一个共同的问题:不想下载到本地再打印,既占用空间又浪费时间。那么&…...
设置了 robots.txt 禁止爬虫抓取,为什么还是能被百度搜索出来
虽然设置了 robots.txt 禁止爬虫抓取,但网页仍可能被百度搜索出来,主要有以下几个原因: robots.txt 只是一种建议性协议,并非强制性[2]。虽然大多数搜索引擎会遵守 robots.txt 的规则,但并不是所有爬虫都会严格遵守。 …...
DedeCMS-V5.7.82-UTF8织梦管理系统漏洞
将靶场环境放到www目录下——访问/dedecms/uploads 安装程序 - 织梦内容管理系统 V5.7 UTF8SP2 同意协议——继续 继续 配置后——点击继续 进入后台 登录后台——填写用户名密码。 方法一:上传shell文件 后台——核心——附件管理——上传新文件。 访问/dedecms…...
【Python】字符串练习题及代码示例
1、使用while循环实现对字符串中每个字符进行输出。 代码示例: 2、请将代码实现如下进制的转换。 (1)v1675,请将v1转换为二进制。 代码: 注意:将十进制数转换为二进制数的方法是:bin(a),a是整型&#x…...
fluent动网格profile udf 注意事项
案例一: ((profile_name transient 2 0) ....第一行 (time 0 15.0) ....第二行 (v_x 1.2 1.2)) …...
【doghead】mac构建 2: player 端 clion构建
准备工作 【doghead】mac构建 1 【doghead】mac: clion2024.1启动崩溃 mbp的 uv 构建ok zhangbin@zhangbin-mbp-2 ~/tet/Fargo/zhb-bifrost/Bifrost-202403/worker/third_party/libuv main clion使用lldb cmake构建 更...
论网络流(最大流篇)--新手入门超详解--包教包会
论网络流--新手入门超详解--包教包会 1 前言2 什么是最大流3最大流问题的求解(1)问题转化--增广路的引入(2)走回头路--EK算法(3)EK的弊端(4)化图为树--DINIC算法 4后记 1 前言 网络…...
环境搭建:全面详尽的 MongoDB Shell MongoDB Server介绍、安装、验证与配置指南(以 Windows 系统为主)
环境搭建:全面详尽的 MongoDB Shell & MongoDB Server介绍、安装、验证与配置指南(以 Windows 系统为主) MongoDB 是一个基于文档的 NoSQL 数据库,以其高性能、灵活性和可扩展性而受到广泛欢迎。本文将带您完成 MongoDB 的安装…...
使用 OpenSearch 的 K-NN 向量搜索来增强搜索功能
使用 OpenSearch 的 K-NN 向量搜索来增强搜索功能 许多应用程序都依赖于提供精确且相关的搜索结果的能力。尽管传统关系数据库的全文搜索功能在某些情况下已经足够,但这些数据库在从文本中提取语义含义或搜索结构化程度较低的数据方面可能会出现不足。在这篇博文中&…...
Less-2(闭合)
我们使用第一关的测试方法尝试一下,打咩 直接看源码,看到,尝试一下闭合 <?php ini_set("display_errors", 0); $str $_GET["keyword"]; echo "<h2 aligncenter>没有找到和".htmlspecialchars($str)."相…...
mysql介绍
MySQL是一种开源的关系型数据库管理系统(RDBMS),广泛用于存储和管理数据。它支持多种操作系统,如Linux、Windows、MacOS等。MySQL的特点包括: 1.开源免费:MySQL是开源的,可以免费使用和分发。 2…...
【ROS学习】ROS中 use_sim_time 参数的含义与作用
文章目录 写在前面一、背景描述二、 use_sim_time 参数的含义与作用三、举例说明1. 不设置use_sim_time (也即 use_sim_time false),播放数据集使用rosbag play **.bag 2. 不设置use_sim_time (也即 use_sim_time false),播放数据集使用rosbag play **…...
python-查找元素3(赛氪OJ)
[题目描述] 有n个不同的数,从小到大排成一列。现在告诉你其中的一个数x,x不一定是原先数列中的数。你需要输出最后一个<x的数在此数组中的下标。输入: 输入共两行第一行为两个整数n、x。第二行为n个整数,代表a[i]。输出&#x…...
苹果 Safari 的隐私保护与广告追踪问题 :技术进展与挑战
隐私保护的进展与挑战 近年来,浏览器行业在隐私保护技术方面取得了显著进展,尤其是在广告追踪领域。谷歌的 Chrome 浏览器推广了隐私沙盒,通过将用户可能感兴趣的主题分类并推送给广告商。Mozilla Firefox 和 Meta Facebook 则推出了一种名为…...
pytest之fixture
Pytest 中 Fixture 的 yield 用法 在软件测试中,设置和清理测试环境是一个重要的环节。Pytest 作为一个功能强大的测试框架,通过 Fixture 机制简化了这一过程。特别是yield语句的使用,使得 Fixture 能够在测试前进行设置,并在测试…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...
从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码":Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力,从金融交易到交通管控,这些关乎国计民生的关键领域…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
高防服务器价格高原因分析
高防服务器的价格较高,主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因: 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器,因此…...
【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)
旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据!该数据集源自2025年4月发表于《地理学报》的论文成果…...
