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

nyf_unknown2024-12-09 23:59

(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