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 弹框,点击空白处,默认是 ...
随机推荐
- PHP 学习笔记摘要
文章更新于2020-03-17 文章目录 一.基础知识 二.知识点细节说明 (1)boolean 布尔型 (2)string 字符串型 (3)integer 整型 (4)float 浮点型 (5)ar ...
- 【第一章】黎姿的python学习笔记
- 学习《深入应用c++11》1
C++11 让程序更简洁.更优雅 可调用对象 是一个函数指针 是一个具有operator()成员函数的类对象(仿函数) 是一个可被装换为函数指针的类对象 是一个类的成员(函数)指针 void func ...
- Struts2-学习笔记系列(6)-动态调用action
动态调用之前需要配置: <!--动态方法调用--> <constant name="struts.enable.DynamicMethodInvocation" ...
- hive常用函数四
字符串函数 1. 字符串长度函数:length 语法: length(string A) 返回值: int 说明:返回字符串A的长度 举例: hive> select length('abced ...
- 通过STC15F2K60S2控制SIM900A发中英文短信,打电话
本文通过串口通信,使用STC15系列单片机实现发短信打电话功能. 一. 注意事项 1. 首先要确定手机卡已经注册到网络,具备打电话发短信功能 2. 正确的硬件连接: P3.0-----STXD或者5V ...
- 通过Java HTTP连接将网络图片下载到本地
通过Java HTTP连接将网络图片下载到本地 只知道浏览器使用的是HTTP协议,那么如何将网络资源使用JavaHTTP下载下来呢! 这只是一个非常简单的小示例,只是不想每次碰到关于此方面的内容忘 ...
- [转] [腾讯游戏学院] Roguelike到底是什么?
如果你是一位资深游戏玩家,那么最近你肯定在哪里看到过 Roguelike 这个词.Roguelike 这个古老的游戏类型现在又变得很潮流,其中各种要素都在不断的被新游戏借鉴.作为一名就是比你有更多空余 ...
- 06-移动web之flex布局
一.基本概念 flex布局又叫伸缩布局 .弹性布局 .伸缩盒布局 .弹性盒布局 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. ...
- three.js - 一个javascript 3D代码库
这个项目的目的是用最简单的开发模式创建一个轻量级的3 d代码库,这个js库提供了canvas,svg,css3d和webgl这四种渲染方式. 下载地址: 下载地址:https://github.com ...