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

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


获取到:["养殖区","鸡棚","E5001"]

期望:["E5001"]

问题:

解决方法

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

1.单选

c 复制代码
<el-cascader
  v-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.多选

c 复制代码
<el-cascader
  v-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

相关推荐
daols8835 分钟前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴4 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust4 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放4 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝5 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele6 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试