(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

相关推荐
遂心_16 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy17 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy17 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼17 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子18 小时前
迭代器和生成器
前端·javascript
洋葱头_18 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing19 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人21 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
最后一个农民工21 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
RoyLin21 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js