(vue)el-cascader多选级联选择器,值取最后一级的数据

(vue)el-cascader多选级联选择器,取值取最后一级的数据


在这里插入图片描述

获取到:[“养殖区”,“鸡棚”,“E5001”]
期望:[“E5001”]

问题:

在这里插入图片描述

解决方法

增加change事件方法,处理选中的value值

1.单选

<el-cascaderv-model="tags2":options="newOptionObj.zhuanjiaList":show-all-levels="false":props="{ value: 'userId', label: 'nickName' }"clearable@change="tags2Handle(tags2)"
></el-cascader>//方法
tags2Handle(val) {this.tags2 = val[val.length - 1];
},

2.多选

<el-cascaderv-model="tags1":options="newOptionObj.zhuanjiaList":show-all-levels="false":props="{value: 'userId',label: 'nickName',multiple: true,}"clearable@change="tags1Handle(tags1)"
></el-cascader>//方法:
tags1Handle(val) {let tags1Arr = [];//取出多选的数组中每项的最后一项的值val.forEach((item) => {tags1Arr.push(item[item.length - 1]);});this.expertIds = tags1Arr.join(",");//将数组转为以‘,’分割的字符串
},

解决参考:https://blog.csdn.net/weixin_42784349/article/details/132367259

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/888760.shtml

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

相关文章

Git常用的命令【提交与回退】

git分布式版本控制系统 &#xff08;SVN集中式版本控制系统&#xff09;之间的对比 git有本地仓库和远程仓库&#xff0c;不同的开发人员可以分别提交自己的本地仓库并维护代码的版本控制。 然后多个人员在本地仓库协作的代码&#xff0c;可以提交到远程仓库中做整合。 git本…

AUTOSAR AP和CP的安全要求规范(Safety Req)详细解读

一、规范的编制的背景原因 编制该规范的原因 确保系统安全性和可靠性 随着汽车电子系统日益复杂&#xff0c;功能不断增加&#xff0c;对安全性和可靠性的要求也越来越高。该规范为AUTOSAR平台在安全执行、配置、更新、信息交换、数据处理等多方面制定了明确要求&#xff0c;…

黑马程序员MybatisPlus/Docker相关内容

Day01 MP相关知识 1. mp配置类&#xff1a; 2.条件构造器&#xff1a; 具体的实现例子&#xff1a; ①QuerryWapper&#xff1a; ②LambdaQueryWrapper: 3.MP的自定义SQL 4.MP的Service层的实现 5.IService下的Lambda查询 原SQL语句的写法&#xff1a; Lambda 查询语句的…

一番赏小程序定制开发,打造全新抽赏体验平台

随着盲盒的热潮来袭&#xff0c;作为传统的潮玩方式一番赏也再次受到了大家的关注&#xff0c;市场热度不断上升&#xff01; 一番赏能够让玩家百分百中奖&#xff0c;商品种类丰富、收藏价值高&#xff0c;拥有各种IP&#xff0c;从而吸引着各个圈子的粉丝玩家&#xff0c;用…

【小脚本】pandas 操作csv,数据筛选分析生成表格

有一个表格&#xff0c;想要具体分析里面的数据&#xff0c;获得在一定条件下的结果&#xff0c;并且想要比较好的可视化。 下面的脚本涉及 修改 列的名字&#xff0c;并用excel 中的列名索引剔除第一行&#xff0c;去掉没打分的行对所选择的列统计&#xff0c;并更好的可视化…

HarmonyOS 5.0应用开发——Ability与Page数据传递

【高心星出品】 文章目录 Ability与Page数据传递Page向Ability传递数据Ability向Page传递数据 Ability与Page数据传递 基于当前的应用模型&#xff0c;可以通过以下几种方式来实现UIAbility组件与UI之间的数据同步。 使用EventHub进行数据通信&#xff1a;在基类Context中提供…

【求助】Tinymce组件异常

版本号 { "tinymce/tinymce-vue": "^3.0.1", "tinymce": "^5.10.9", "vue": "^2.6.10", }问题&#xff1a; 就是红框处点击后没有菜单出现&#xff0c;下面是正常的

【100】SR-IOV cap中Supported Page Sizes (RO)和System Page Size (RW)

SR-IOV的介绍见&#xff1a;【88】SR-IOV-CSDN博客 SR-IOV cap中的Supported Page Sizes (RO)和System Page Size (RW)字段 SR-IOV cap中定义了Supported Page Sizes (RO)和System Page Size (RW)两个字段&#xff0c;offset 如下&#xff1a; Supported Page Sizes (RO)字…

小程序 - 计算器

小程序交互练习 - 计算器小程序 目录 计算器 功能描述 准备工作 创建项目 配置导航栏 创建utils目录 math.js文件内容 calc.js文件内容 页面内容 页面样式内容 页面脚本事件 功能截图 总结 计算器 在日常生活中&#xff0c;计算器是人们广泛使用的工具&#xff0…

视频监控汇聚平台:Liveweb安防监控平台实现接入监控视频集中管理方案

随着各行业数字化转型的不断推进&#xff0c;视频监控技术在行业内的安防应用及管理支撑日益增多。然而&#xff0c;由于前期规划不清晰、管理不到位等问题&#xff0c;视频监管系统普遍存在以下问题&#xff1a; 1. 各部门单位在视频平台建设中以所属领域为单位&#xff0c;导…

遇到问题:hive中的数据库和sparksql 操作的数据库不是同一个。

遇到的问题&#xff1a; 1、hive中的数据库和sparksql 操作的数据库不同步。 观察上面的数据库看是否同步 &#xff01;&#xff01;&#xff01; 2、查询服务器中MySQL中hive的数据库&#xff0c;发现创建的位置没有在hdfs上&#xff0c;而是在本地。 这个错误产生的原因是&…

SQL靶场第六关

一.判断闭合点 闭合点是" 输入?id1页面无变化 输入?id1"页面报错&#xff0c;加上--&#xff0c;页面恢复正常&#xff0c;说明闭合点是" 二.判断列数 输入?id1" order by 3--页面正常 输入?id1" order by 4--页面异常&#xff0c;说明有3列…

fedora下Jetbrains系列IDE窗口中文乱码解决方法

可以看到窗口右部分的中文内容为小方块。 进入 Settings - Appearance & Behavior - Appearance - Use custom font : Note Sans Mono CJK SC &#xff0c;设置后如下图&#xff1a;

解决IDEA的easycode插件生成的mapper.xml文件字段之间逗号丢失

问题 easycode插件生成的mapper.xml文件字段之间逗号丢失&#xff0c;如图 解决办法 将easycode(在settings里面的othersettings)设置里面的Template的mapper.xml.vm和Global Config的mybatisSupport.vm的所有$velocityHasNext换成$foreach.hasNext Template的mapper.xml.vm(…

科技型中小企业信息库数据(1952-2021年)

一、包含指标&#xff1a; 企业名称 登记状态 法定代表人 注册资本 成立日期 核准日期 所属省份 所属城市 所属区县 电话 更多电话 邮箱 更多邮箱 统一社会信用代码 纳税…

机器学习决策树原理详解

一、引言 在当今蓬勃发展的人工智能与大数据领域&#xff0c;大模型正以前所未有的影响力改变着众多行业的格局。而决策树作为机器学习算法家族中的经典成员&#xff0c;以其简洁直观的特点和广泛的适用性&#xff0c;不仅能独立解决诸多实际问题&#xff0c;更是诸多先进大模…

Day2——需求分析与设计

教师端签到应用软件的需求分析&#xff1b; 产品经理如何写好产品需求文档&#xff08;附模板&#xff09; 需求分析是软件开发过程中的关键步骤&#xff0c;它确保了开发的软件能够满足用户的需求。以下是进行需求分析的具体步骤&#xff1a; 1. 确定分析目标 明确教师端签到…

个人IP建设:简易指南

许多个体创业者面临的一个关键挑战是如何为其企业创造稳定的需求。 作为个体创业者&#xff0c;您无法使用营销团队&#xff0c;因此许多人通过推荐和他们的网络来产生需求。因此&#xff0c;扩大您的网络是发展您的业务和产生持续需求的最佳策略。 这就是个人IP和品牌发挥作…

Leetcode—1539. 第 k 个缺失的正整数【简单】

2024每日刷题&#xff08;206&#xff09; Leetcode—1539. 第 k 个缺失的正整数 C实现代码 class Solution { public:int findKthPositive(vector<int>& arr, int k) {int missing 1;int cur 1;int n arr.size();int missingCnt 0;int ptr 0;for(; missingCn…

STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

一、HAL_UART_Transmit和HAL_UART_Transmit_IT的区别 1. HAL_UART_Transmit_IT&#xff08;非阻塞模式&#xff09;&#xff1a; HAL_UART_Transmit_IT 是非阻塞的传输函数&#xff0c;也就是说&#xff0c;当你调用 HAL_UART_Transmit_IT 时&#xff0c;它不会等到数据完全发…