element-ui中cascader同时获取label和value值
关于elementUI中cascader选中值后,能获取value或者label,但不能同时获value和label,这一问题,琢磨出了这么个办法。
以新增和编辑城市为例,type: 1 编辑,type: 0 新增
1. 配置元素
<el-cascader filterable
:class="{'city-cascader': type==1}"
:placeholder="city || '请选择'"
:options="cityLists"
:props="cityProps"
v-model="citySelected"
style="width:300px;"
:show-all-levels="false"
@change="changeCity" >
</el-cascader>
2. 配置cityProps
cityProps: {value: 'all', label: 'label'}
3. 组装props中的all
// cityLists中遍历组装all
all: {
value: value,
label: label
}
4. 使用
此时,点击cascader选择需要的内容后,
取出来的citySelected值就是[{value: 选中值的value, label: 选中值的label}]
这个方法可以通过配置all获取任意自己想要的值。
PS: 关于拿不到默认值的问题,我投机取巧的使用了placeholder。
:placeholder="city || '请选择'"
然后在cascader上加上样式:
:class="{'city-cascader': type==1}"
.city-cascader .el-input__inner::placeholder {
color: #333 !important;
}
ok,完美解决cascader取值问题。
element-ui中cascader同时获取label和value值的更多相关文章
- element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值
template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- js文件中如何使用 获取EL表达式的值
转: js文件中如何使用 获取EL表达式的值 原先做法是在jsp页面引入头文件 <%@ page language="java" pageEncoding="UTF ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- element ui中的一些小技巧
最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台. 遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...
随机推荐
- postfix基础邮件服务
postfix基础邮件服务 案例1:postfix基础邮件服务 1.1 问题 本例 ...
- 电商平台--Mysql主从搭建(2)
Master上授权从库: ```grant replication slave on *.* to slave1@ip identified by 'password';``` 基于数据库hotcop ...
- 鬼吹灯之龙岭迷窟百度云迅雷BT在线观看免费全集
看视频搜索微信公众号:qyw1091 还记得去年5月11日在高家堡举行的<鬼吹灯之龙岭迷窟>开机仪式吗?时隔数月,这部网剧于4月1日将在腾讯视频全网独播了! . <鬼吹灯之龙岭迷窟& ...
- 【翻译】OpenVINO Pre-Trained 预训练模型介绍
OpenVINO 系列软件包预训练模型介绍 本文翻译自 Intel OpenVINO 的 "Overview of OpenVINO Toolkit Pre-Trained Models& ...
- Java第十天,多态
多态 一.多态的定义: 一个对象拥有多种形态,这就是对象的多态性.也就是说多态针对的是对象.多态的前提是接口和继承(C++中实行多继承,不存在接口). 二.多态在代码中的形式: 父类 对象名 = ne ...
- Python爬虫利器 cURL你用过吗?
hello,小伙伴们,今天给大家分享的开源项目是一个python爬虫利器,感兴趣的小伙伴看完这篇文章不妨去尝试一下,这个开源项目就是curlconverter,不知道小伙伴们分析完整个网站后去code ...
- ThinkPHP3.2.3发送微信模板消息
一.开通模板消息功能 所有服务号都可以在功能->添加功能插件处看到申请模板消息功能的入口,但只有认证后的服务号才可以申请模板消息的使用权限并获得该权限:需要选择公众账号服务所处的2个行业,每月可 ...
- 第十三节:telnetlib、redis、threading模块
telnetlib模块案例: import telnetlib,re class TelnetInfo(): def telnetdo(self, host, port, command): tn = ...
- Go语言讲解深拷贝与浅拷贝
我们在开发中会经常的把一个变量复制给另一个变量,那么这个过程,可能是深浅拷贝,那么今天帮大家区分一下这两个拷贝的区别和具体的区别. 一.概念 1.深拷贝(Deep Copy): 拷贝的是数据本身,创造 ...
- Some Modern Softwares' drawbacks: User experience 12/29/2015
In the nowadays, there are many APP in the PC or smart Phone. Some of them can't meet the customers' ...