el-cascader获取name值

暗月Moon

已于 2022-11-08 22:56:25 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： vue.js javascript 前端 elementui

于 2022-11-07 23:42:37 首次发布

本文链接：https://blog.csdn.net/Anyuegogogo/article/details/127741942

element-ui 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中使用el-Cascader组件，并通过添加ref来获取级联选择器的状态。具体展示了如何监听选择变化并在@change事件中获取选中的节点路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给el-cascader添加ref，然后在@change事件中获取如下:

 <el-cascader
   clearable
   v-model="cityCode"
   placeholder="请选择"
   :props="defaultProps"
   :options="AllArea"
   @change="areaChange"
   ref="areaCascader"
   style="width: 100%"
 ></el-cascader>

  public areaChange() {
  	console.log((this.$refs["areaCascader"] as any).getCheckedNodes()[0].pathLabels)
  }

如果是在一个数组中获取每个cascader对应的name数组：

<el-row v-for="(item, index) in locationList" :key="index">
 <el-cascader
   clearable
   v-model="item.cityCode"
   placeholder="请选择"
   :props="defaultProps"
   :options="AllArea"
   @change="areaChange($event, index)"
   ref="areaCascader"
   style="width: 100%"
 ></el-cascader>
</el-row>

  public areaChange(arr, index) {
    console.log(
      arr[0],
      index,
      this.locationList,
      (this.$refs["areaCascader"] as any)[index].getCheckedNodes()[0].pathLabels
    );
  }