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

(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级联选择器按勾选的顺序传值,摆脱层级约束 需求&#xff1a;按勾选的顺序给后端传值 难点&#xff1a;在 Element UI 的 el-cascader 组件中&#xff0c;默认的行为是根据数据的层级结构来显示选项&#xff0c;用户的选择也会基于这种层级结构&#xff0c;el-…...

Redis进阶(四):哨兵

为了解决主节点故障&#xff0c;需要人工操作切换主从的情况&#xff1b;因此需要一种方法可以自动化的切换&#xff1a;哨兵的引入大大改变这种情况。 哨兵的基本概念 自动切换主从节点 哨兵架构 1、当一个哨兵节点发现主节点挂了的时候&#xff0c;还需要其他节点也去检测一…...

蓝屏事件:网络安全的启示

“微软蓝屏”事件暴露了网络安全哪些问题&#xff1f; 近日&#xff0c;一次由微软视窗系统软件更新引发的全球性“微软蓝屏”事件&#xff0c;不仅成为科技领域的热点新闻&#xff0c;更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件&#xff0c;源于美国电脑安全技…...

技术方案评审原则

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言技术方案评审原则1.理论突破阶段2.技术突破阶段3.工程化阶段自动驾驶行业的技术方案分析前言 认知有限,望大家多多包涵,有什么问题也希望能够与大…...

117页PPT埃森哲-物流行业信息化整体规划方案

一、埃森哲-物流行业信息化整体规划方案 资料下载方式&#xff0c;请看每张图片右下角信息 埃森哲在物流行业信息化整体规划项目中的核心内容&#xff0c;旨在帮助物流企业通过信息技术的应用实现业务流程的优化、运营效率的提升以及市场竞争力的增强。以下是埃森哲在此类项目…...

百度网盘不下载怎么直接打印文件?

在数字化时代&#xff0c;百度网盘作为我们存储和分享文件的重要工具&#xff0c;承载了大量的文档、图片和资料。然而&#xff0c;当需要打印这些文件时&#xff0c;很多用户会面临一个共同的问题&#xff1a;不想下载到本地再打印&#xff0c;既占用空间又浪费时间。那么&…...

设置了 robots.txt 禁止爬虫抓取,为什么还是能被百度搜索出来

虽然设置了 robots.txt 禁止爬虫抓取&#xff0c;但网页仍可能被百度搜索出来&#xff0c;主要有以下几个原因&#xff1a; robots.txt 只是一种建议性协议&#xff0c;并非强制性[2]。虽然大多数搜索引擎会遵守 robots.txt 的规则&#xff0c;但并不是所有爬虫都会严格遵守。 …...

DedeCMS-V5.7.82-UTF8织梦管理系统漏洞

将靶场环境放到www目录下——访问/dedecms/uploads 安装程序 - 织梦内容管理系统 V5.7 UTF8SP2 同意协议——继续 继续 配置后——点击继续 进入后台 登录后台——填写用户名密码。 方法一&#xff1a;上传shell文件 后台——核心——附件管理——上传新文件。 访问/dedecms…...

【Python】字符串练习题及代码示例

1、使用while循环实现对字符串中每个字符进行输出。 代码示例&#xff1a; 2、请将代码实现如下进制的转换。 &#xff08;1&#xff09;v1675,请将v1转换为二进制。 代码&#xff1a; 注意&#xff1a;将十进制数转换为二进制数的方法是&#xff1a;bin(a),a是整型&#x…...

fluent动网格profile udf 注意事项

案例一&#xff1a; ((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最大流问题的求解&#xff08;1&#xff09;问题转化--增广路的引入&#xff08;2&#xff09;走回头路--EK算法&#xff08;3&#xff09;EK的弊端&#xff08;4&#xff09;化图为树--DINIC算法 4后记 1 前言 网络…...

环境搭建:全面详尽的 MongoDB Shell MongoDB Server介绍、安装、验证与配置指南(以 Windows 系统为主)

环境搭建&#xff1a;全面详尽的 MongoDB Shell & MongoDB Server介绍、安装、验证与配置指南&#xff08;以 Windows 系统为主&#xff09; MongoDB 是一个基于文档的 NoSQL 数据库&#xff0c;以其高性能、灵活性和可扩展性而受到广泛欢迎。本文将带您完成 MongoDB 的安装…...

使用 OpenSearch 的 K-NN 向量搜索来增强搜索功能

使用 OpenSearch 的 K-NN 向量搜索来增强搜索功能 许多应用程序都依赖于提供精确且相关的搜索结果的能力。尽管传统关系数据库的全文搜索功能在某些情况下已经足够&#xff0c;但这些数据库在从文本中提取语义含义或搜索结构化程度较低的数据方面可能会出现不足。在这篇博文中&…...

Less-2(闭合)

我们使用第一关的测试方法尝试一下,打咩 直接看源码&#xff0c;看到&#xff0c;尝试一下闭合 <?php ini_set("display_errors", 0); $str $_GET["keyword"]; echo "<h2 aligncenter>没有找到和".htmlspecialchars($str)."相…...

mysql介绍

MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛用于存储和管理数据。它支持多种操作系统&#xff0c;如Linux、Windows、MacOS等。MySQL的特点包括&#xff1a; 1.开源免费&#xff1a;MySQL是开源的&#xff0c;可以免费使用和分发。 2…...

【ROS学习】ROS中 use_sim_time 参数的含义与作用

文章目录 写在前面一、背景描述二、 use_sim_time 参数的含义与作用三、举例说明1. 不设置use_sim_time (也即 use_sim_time false)&#xff0c;播放数据集使用rosbag play **.bag 2. 不设置use_sim_time (也即 use_sim_time false)&#xff0c;播放数据集使用rosbag play **…...

python-查找元素3(赛氪OJ)

[题目描述] 有n个不同的数&#xff0c;从小到大排成一列。现在告诉你其中的一个数x&#xff0c;x不一定是原先数列中的数。你需要输出最后一个<x的数在此数组中的下标。输入&#xff1a; 输入共两行第一行为两个整数n、x。第二行为n个整数&#xff0c;代表a[i]。输出&#x…...

苹果 Safari 的隐私保护与广告追踪问题 :技术进展与挑战

隐私保护的进展与挑战 近年来&#xff0c;浏览器行业在隐私保护技术方面取得了显著进展&#xff0c;尤其是在广告追踪领域。谷歌的 Chrome 浏览器推广了隐私沙盒&#xff0c;通过将用户可能感兴趣的主题分类并推送给广告商。Mozilla Firefox 和 Meta Facebook 则推出了一种名为…...

pytest之fixture

Pytest 中 Fixture 的 yield 用法 在软件测试中&#xff0c;设置和清理测试环境是一个重要的环节。Pytest 作为一个功能强大的测试框架&#xff0c;通过 Fixture 机制简化了这一过程。特别是yield语句的使用&#xff0c;使得 Fixture 能够在测试前进行设置&#xff0c;并在测试…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...