element 级联选择获取label 同时获取value和label element 级联选择回显

最新推荐文章于 2024-06-27 15:47:20 发布

原创最新推荐文章于 2024-06-27 15:47:20 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #html5 #前端 #vue.js

vue 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍如何在ElementUI的Cascader组件中同时获取value和label值。通过设置ref属性和利用getCheckedNodes方法，只需两行代码即可轻松实现。适用于需要处理多级联动数据的前端开发者。

部署运行你感兴趣的模型镜像

前情提要

在elementUI的Cascader级联选择组件中，获取value大家应该都懂，一般我们会将value设置为id ;

<el-cascader
            size="small"
            :options="listAll"
            placeholder="请选择或输入"
            filterable
            ref="cascaderAddr"
            :props="{value: 'id'}"  //设置为id
            clearable v-model="form.address" @change="handleChange">
          </el-cascader>

BUT !!!文档并没有表明如何同时获取label的值，props也只能是一个字符串，无法将label拼接。

具体实现

只要2行代码即可获取选中的各级label组成的数组
1、首先在组建中设置ref属性如：ref=“cascaderAddr”；
2、在change事件打印this.$refs[‘cascaderAddr’].getCheckedNodes()[0].pathLabels既可获取；
见下方代码

<el-cascader
            size="small"
            :options="listAll"
            placeholder="请选择或输入"
            filterable
            ref="cascaderAddr"
            :props="{value: 'id'}"  //设置为id
            clearable v-model="form.address" @change="handleChange">
          </el-cascader>
//js
handleChange(value) {
      console.log(value); //打印出所选级联id，类型为数组
      let casLabelVal = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels;
      console.log(casLabelVal ); //打印出所选级联label,类型为数组
      }