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

(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.lryc.cn/news/499174.html

相关文章:

  • 友思特方案 | 精密制程的光影贴合:半导体制造中的高功率紫外光源
  • README写作技巧
  • 【密码学】分组密码的工作模式
  • SQL 和 NoSQL 有什么区别?
  • 提升网站流量的关键:AI在SEO关键词优化中的应用
  • Harnessing Large Language Models for Training-free Video Anomaly Detection
  • 如何通过自学成长为一名后端开发工程师?
  • HDR视频技术之六:色调映射
  • (洛谷题目)P11060 【MX-X4-T0】「Jason-1」x!
  • TEXT2SQL工具vanna本地化安装和应用
  • Bloom 效果
  • AWS 机器学习,推动 AI 技术的健康发展
  • MCPTT 与BTC
  • Jackson - JsonGenerator创建JSON、JsonParser解析JSON
  • Linux-音频应用编程
  • 《QT 示例宝库:探索丰富的编程世界》
  • 腾讯云流式湖仓统一存储实践
  • 18 设计模式之迭代器模式(书籍遍历案例)
  • 超清4K视频素材哪里找?优质下载资源网站分享
  • 刷题日志【1】
  • 【C++算法】32.前缀和_矩阵区域和
  • 使用堆栈(Stack)
  • 雨晨 2610(2)0.2510 Windows 11 24H2 Iot 企业版 LTSC 2024 极简 2in1
  • HDD 2025年技术趋势深度分析报告
  • 算法-字符串-22.括号生成
  • Free-RTOS实现LED闪烁
  • NLP论文速读(斯坦福大学)|使用Tree将语法隐藏到Transformer语言模型中正则化
  • 再谈多重签名与 MPC
  • CTF学习24.11.19[音频隐写]
  • vue的watch是否可以取消? 怎么取消?