关于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值的更多相关文章

  1. element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值

    template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ...

  2. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  3. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  4. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  5. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  6. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  7. js文件中如何使用 获取EL表达式的值

    转: js文件中如何使用 获取EL表达式的值 原先做法是在jsp页面引入头文件 <%@ page language="java" pageEncoding="UTF ...

  8. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  9. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

随机推荐

  1. BigDecimal 笔记

    参数 BigDecimal 类主要有如下几个参数 这几个参数都比较好理解,看过这两个例子基本都能明白,现在总结一下就是 scale // 小数点后位数 precision // 一共位数 intCom ...

  2. 使用mpvue开发小程序如何定义全局变量

    我们创建好mpvue项目之后,找到src/main.js打开在后面添加一行代码 (注意:不能在const app = new Vue(App) 之前添加) Vue.prototype.globalDa ...

  3. 家庭记账本app进度之android中AlertDialog的相关应用以及对日期时间的相关操作(应用alertdialog使用的谈话框)

    对于AlertDialog的相关知识: 1.创建构造器AlertDialog.Builder的对象:    2.通过构造器对象调用setTitle.setMessage.setIcon等方法构造对话框 ...

  4. Flask 入门(特别篇)

    作为一款优秀的编辑器,pycharm得到了很多人的支持,但是刚接触它的小伙伴会遇到一个困难,如何把一个别人做的python项目导入到pycharm里面呢? 1.手动建立一个虚拟环境,注意这个环境和你导 ...

  5. Python——详解__str__, __repr__和__format__

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第10篇文章,我们来聊聊Python当中的类. 打印实例 我们先从类和对象当中最简单的打印输出开始讲起,打印一个实例 ...

  6. 安卓开发学习日记 DAY3——TextView,EditView,ImageView

    今天学习了一些控件的使用方法,包括TextView,EditView,ImageView 1.TextView,输出一个文本呗 主要属性有 android:id 标志 android:layout_w ...

  7. centos7安装jmeter + ant

    1.xshell链接上centos7服务器 先安装jmeter 使用wget  jmeter-xxxxxxxxxxxx进行联网自动下载(先进入jmeter官网,然后找到要下载的.tgz压缩包,然后右键 ...

  8. 疲劳驾驶打瞌睡?python保障您的驾驶安全

    道路千万条,安全第一条!疲劳驾驶可谓交通事故几大罪魁祸首之一,根据美国一项研究显示,司机睡眠不足4小时,交通事故肇事几率等同于醉驾. 为了减少疲劳驾驶现象,驾驶员疲劳检测应运而生.这是一项安全技术,可 ...

  9. L8梯度消失、梯度爆炸

    houseprices数据下载: 链接:https://pan.baidu.com/s/1-szkkAALzzJJmCLlJ1aXGQ 提取码:9n9k 梯度消失.梯度爆炸以及Kaggle房价预测 代 ...

  10. 架构师修炼之微服务部署 - Docker简介

    Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是 ...