element ui Cascader联级选择器获取label的值

心已赠人 2022-10-16 06:15 20阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]![20210527132831424.png][]

主要用到官网的方法：[getCheckedNodes][]

<div class="address_management_two_two flex">
    	<span class="demonstration name_wid_left">省市区：</span>
    		<el-cascader v-model="value" :options="options" ref="cascaderAddr"
    			:props="{value:'v',label:'n',children: 'c'}" @change="handleChange">
    		</el-cascader>
    </div>

handleChange() {
    		// 选择地址
    	let value = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels.join('/');
    	let value2=value.split("/");
    	console.log('选择结果', value2);
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210527132818539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70
[20210527132831424.png]: /images/20221014/3fd6e216d0a54483a17fa24a5749c2b9.png
[getCheckedNodes]: https://element.eleme.cn/#/zh-CN/component/cascader

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element-ui(Cascader 级联选择器)实现三级联动

1：将省市县数据三张表存放到数据库中市区表： CREATE TABLE `med_cities` ( `id` int(11) NOT NULL

Bertha 。/ 2023年10月04日 23:17/ 0 赞/ 55 阅读

相关设置Cascader级联选择器默认值

// this.$set(this.teamArea,0,this.team.province) // this.$set(this.teamArea,1,th

谁借莪１个温暖的怀抱￠/ 2023年03月06日 03:51/ 0 赞/ 9 阅读

相关 Element cascader 级联选择器使用，及获取当前选中的对象

使用步骤： 1、html代码： <el-cascader ref="xzCascader" :props="xzProps

╰半夏微凉°/ 2023年01月08日 10:30/ 0 赞/ 584 阅读

相关 Element UI学习3--Cascader 级联选择器

1、基础用法 1、默认 click 触发子菜单 <div class="block"> <span class="demonstration"

约定不等于承诺〃/ 2023年01月03日 04:16/ 0 赞/ 514 阅读

相关 Element-ui Cascader 级联选择器回显数据

回显的方式 > 两种情况： > 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） > 2.保存最后一位，递归回显（

快来打我*/ 2022年10月27日 13:42/ 0 赞/ 19 阅读

相关 element ui Cascader联级选择器获取label的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

心已赠人/ 2022年10月16日 06:15/ 0 赞/ 21 阅读

相关 Element el-cascader 级联选择器详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 数据绑定 2.1 默认数据绑定 2.2 指

女爷i/ 2022年09月09日 12:51/ 0 赞/ 799 阅读

相关 element-ui之级联选择器(Cascader)的使用详细过程

使用element-ui级联选择器：从后台获取数据的过程:参考------->[java从数据库中读取数据-生成菜单树tree之算法优化][java_-_tree]

亦凉/ 2022年04月23日 00:08/ 0 赞/ 556 阅读

相关 Element-ui Cascader 级联选择器同时返回 value 和 label

1、给 cascader 组件赋值一个别名 <el-cascader ref="cascaderAddr" @change="change"> </el-cascade

一时失言乱红尘/ 2022年03月18日 13:10/ 0 赞/ 562 阅读

相关 VUE Element-ui 级联选择器，自定义value label属性

HTML 代码： <el-cascader v-model="dept" clearable :options

「爱情、让人受尽委屈。」/ 2021年10月01日 05:26/ 0 赞/ 760 阅读