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 ...
随机推荐
- ctfshow web入门41
这个题过滤了$.+.-.^.~使得异或自增和取反构造字符都无法使用,同时甚至过滤了字母和数字. 但是特意留了个或运算符|. 由此我们可以尝试从ascii为0-255的字符中,找到用或运算能得到我们可用 ...
- 为什么JAVA中(byte)128结果为-128;(byte)-129结果为127
为什么JAVA中(byte)128结果为-128;(byte)-129结果为127 在JAVA中默认的整型为int型,int型占4个字节,为32位.byte占一个字节为8位. JAVA中的二进制都是采 ...
- Web Dynpro for ABAP(16):WDA Analysis Tools
3.21 Quality Assurance and Supportability WDA程序效能验证工具. Tests工具: eCATT and Web Dynpro ABAP Debugging工 ...
- virtualenv管理py环境linux版
因为服务器上已经安装了python3,所以直接安装virtualenv即可 pip3 install virtualenv -i https://mirrors.aliyun.com/pypi/sim ...
- 7.golang语言学习,标识符的命名规范
1.凡是自己可以命名的都是标识符 2.命名规则 a.由26个英文字母,数字0-9,_组成 b.不能数字开头 c.严格区分大小写 d.不能包含空格 e.下划线"_"本身在go中是一个 ...
- TypeScript Map 对象
TypeScript Map 对象 Map 对象保存键值对,并且能够记住键的原始插入顺序. 任何值(对象或者原始值) 都可以作为一个键或一个值. Map 是 ES6 中引入的一种新的数据结构,可以参考 ...
- Linux服务器中了挖矿木马怎么办?-挖矿木马自助清理手册
什么是挖矿木马 挖矿木马会占用CPU进行超频运算,从而占用主机大量的CPU资源,严重影响服务器上的其他应用的正常运行.黑客为了得到更多的算力资源,一般都会对全网进行无差别扫描,同时利用SSH爆破和漏洞 ...
- Excel Vlookup用法和常见报错#REF! #Value!
VLOOKUP(E2,$A$2:$C$5,2,FALSE) E2 为选中查找的条件 $A$2:$C$5 1为需要查找的区域,这个区域一般是固定的,所以要加上$符号 2这个区域可以在前面加上SHEET2 ...
- 通过modbus+socket+GPRS采集硬件数据
# !/usr/bin/python # -*- coding: UTF-8 -*- import sys import os TESTCASE = os.path.dirname(os.path.a ...
- 【Leetcode第286场周赛】——周赛总结
1.5268. 找出两数组的不同 - 力扣(LeetCode) (leetcode-cn.com) 给你两个下标从 0 开始的整数数组 nums1 和 nums2 ,请你返回一个长度为 2 的列表 a ...