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


在这里插入图片描述

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

问题:

在这里插入图片描述

解决方法

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

1.单选

<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.多选

<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

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐