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 ...
随机推荐
- 实践:腾讯云COS备份本地数据以及异地备份
在当前大数据时代背景下,数据在业务中占有不可低估的地位,数据备份已然成为了最后一道屏障. 腾讯云对象存储COS,提供数据备份.共享.大数据处理.线上数据托管一站式解决方案,成为了不少企业和个人用户备份 ...
- LaTex【六】表格排版—表格标题位置
LaTex中表格排版--表格描述位置调整 LaTex模板大多默认将表格描述置于表格下方,可通过修改 \caption 的位置调整. 1. 位于表格下方(默认) \begin{table}[h] \be ...
- t:datagrid 行编辑 类型备份
如编辑文本类型: <t:dgCol extendParams="editor:'text'" /> 如编辑数值类型: <t:dgCol extendParams= ...
- 【2020NOI.AC省选模拟#8】C. 海盗
题目链接 原题解: 可以发现,在给定的规则下,若前$i$个人参与分配,则每个人得到的金币个数是固定的. 假设在前$i-1$个海盗参与分配时,某个海盗能得到$x$个金币,则第$i$个海盗需要给他$x+1 ...
- Delphi中var和out
var: 传递的是参数的地址 out: 以返回值的形式返回结果,类似函数的效果:可以实现一个函数返回多个值
- 第二章:用Python对不同的商品销售数据进行预测分析
文章目录 项目背景 获取数据 线性数据预测 非线性数据预测 源码地址 本文分享知识: os 模块获取上一级目录的绝对地址 pands 读取 sqlite3 数据库中的数据 用sklearn中的线性回归 ...
- Windows日常快捷键
Windows: 环境变量: Win+R,--> sysdm.cpl 计算器: Win+R,-->calc 服务:Win+R,-->services.msc 远程:Win+R,--& ...
- C语言ll一作业01
1. 作业头 | 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/zswxy/SE2020-3 | | ---- | ---- | ---- | | 这个作业目 ...
- NOI模板复习组——图论部分
1.最小生成树: kruscal: #include <cstdio> #include <cmath> #include <cstring> #include & ...
- 编译configure常用参数详解
./configure常用参数解释: 具体通过–help来查看具体支持什么功能.有时候编译不通过,可能依赖一些库,如果这些库关联的功能我们不需要,可以通过---disable-*lib来取消相关库的编 ...