(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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui