el-select的正确用法
下拉框应该是大家非常常用的一个组件,表单几乎离不开它,可是用了三年后我突然发现我一直没有正确的使用它。。。。。
ElementUI 组件一直让我纠结的地方是 绑定的值对我来说经常需要绑定值的其他字段信息,而这个信息我一直以来都是通过code值重新find,实际上el-select 的 v-model可以直接绑定对象,通过value-key来指定关键字。
<el-select v-model="rpdComboModel" placeholder="请选择" value-key="EpCode" @change="handleSelectChange">
<el-option v-for="(item,index) in rpdComboData" :label="item.EpDesc" :value="item" :key="index"></el-option>
</el-select> // 定义数据:
rpdComboData: [
{ EpCode: 1, EpDesc: '未开始' },
{ EpCode: 2, EpDesc: '已开始' },
{ EpCode: 3, EpDesc: '已结束' }
],
rpdComboModel: { EpCode: 1, EpDesc: '未开始' } // change的处理事件
handleComboChange(val) {
console.log('handleComboChange', val)
},
el-select的正确用法的更多相关文章
- python 防止sql注入字符串拼接的正确用法
在使用pymysql模块时,在使用字符串拼接的注意事项错误用法1 sql='select * from where id="%d" and name="%s" ...
- MySQL的select for update用法
MySQL中的select for update大家应该都有所接触,但什么时候该去使用,以及有哪些需要注意的地方会有很多不清楚的地方,我把我如何使用和查询到的文档在此记录. 作用 select本身是一 ...
- Spring MVC中Session的正确用法<转>
Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- C#中dynamic的正确用法
C#中dynamic的正确用法 http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4 ...
- C# string.Split对于换行符的分隔正确用法
C# string.Split对于换行符的分隔正确用法 tmpCase "11117144-8c91-4817-9b92-99ec2f9d784a\r\n23D95A26-012C-4332 ...
- 【转】Spring MVC中Session的正确用法之我见
Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...
- 转载~kxcfzyk:Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解
Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解 多线程c语言linuxsemaphore条件变量 (本文的读者定位是了解Pthread常用多线程API和Pthread互斥锁 ...
- C#中dynamic的正确用法 以及 typeof(DynamicSample).GetMethod("Add");
dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...
- MySQL select into outfile用法
select into outfile用法 SELECT ... FROM TABLE_A INTO OUTFILE "/path/to/file" FIELDS TERMINAT ...
随机推荐
- php7安装mogodb
本文教程只在 PHP7 安装使用!!! PHP7 Mongdb 扩展安装 我们使用 pecl 命令来安装: $ /usr/local/php7/bin/pecl install mongodb 执行成 ...
- vue原理
1. Vue 响应式原理 核心实现类: Observer : 它的作用是给对象的属性添加 getter 和 setter,用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应 ...
- IDEA2022 搭建SpringMVC
https://blog.csdn.net/LiuNengJing/article/details/125888494
- 关于npm和yarn的坑
遇到下载出错的情况,这两个两个双管齐下
- alertmanger告警配置
钉钉告警: 需先安装 Ding talk 配置 webhook vim docker-compose.yaml webhook-dingtalk: image: timonwong/prometheu ...
- MySQL日期/时间函数
1.查询当前时间函数: select NOW(),LOCALTIME(),SYSDATE(),CURRENT_TIMESTAMP(); 但是now()与sysdate()有点差异的,一个语句中now( ...
- Linux 使用ssh服务管理远程主机
配置网络服务 配置网卡的4种方法: 创建网络会话 RHEL和CentOS系统默认使用NetworkManager来提供网络服务,这是一种动态管理网络配置的守护进程,能够让网络设备保持连接状态.可以使用 ...
- mysql之数据类型-第三篇
mysql数据库中的每个列都应该有适当的数据类型,用于限制或允许该列中存储的数据.mysql的数据类型分别有整数,浮点数和定点数类型,日期和时间类型,字符串类型和二进制类型等. 整数类型 数值型数据类 ...
- 【loguru】Python简单的日志管理模块
简介 在部署一些定时运行或者长期运行的任务时,为了留存一些导致程序出现异常或错误的信息,通常会才用日志的方式来进行记录这些信息. 在 Python 中用到日志记录,那就不可避免地会用到内置的 logg ...
- kali 下安装tplmap
kali 下安装tplmap 1. 安装kali下的python2的pip工具 kali2020版及以上, 输入python2命令会执行python2, python3也存在. 但pip默认是pip3 ...