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 ...
随机推荐
- Github的.gitignore忽略文件
Git中有一个非常重要的一个文件-----.gitignore 1.当然如果已经push了怎么办?当然也有解决方法,如下: 有时候在项目开发过程中,突然心血来潮想把某些目录或文件加入忽略规则,按照上述 ...
- Ubuntu: 升级或安装最新版本的 Nginx
Ubuntu 默认 apt 源中的 Nginx 版本比较旧,今天介绍下如何在 Ubuntu 中安装最新版本的 Nginx. 要安装较新版本的 Nginx, 可以使用 Nginx 的 APT 源.执行如 ...
- jQuery 使用手册(一)
一:核心部分$(expr)说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础参数:expr:字符串,一个查询表达式或一段html字符串例子:未 ...
- -bash: ./mlnxofedinstall: /usr/bin/perl: bad interpreter: No such file or directory
-bash: ./mlnxofedinstall: /usr/bin/perl: bad interpreter: No such file or directory 解决办法:安装相关的环境即可 输 ...
- 4. 模板解析,生成render函数,渲染页面
解析模板,生成render函数,执行render函数,实现视图渲染 1.模板转化成ast语法树 2.ast语法树生成render函数 3.执行render函数生成虚拟dom 4.执行_update方法 ...
- openwrt 运行golang 设置时区
转载自:https://www.ohyee.cc/post/note_go_read_openwrt_timezone openwrt 运行golang 时候发现打印时间错误.golang读取时区的过 ...
- Java 一次操作多条数据
//新增 <insert id="insertSelectiveList" useGeneratedKeys="true" parameterType=& ...
- CCF 202006-2 稀疏向量
#include <iostream> #include <bits/stdc++.h> #include <string> using namespace std ...
- 某星球存在两种生物,A种生物有1个头6条腿,B种生物有3个头4条腿。来自地球的太空船刚刚在该星球降落, 突然发现一大群这两种生物组成的队伍,由于时间紧,只数了头的数量和腿的数量,请帮助宇航员分析A、B两种生物各有多少个。
package competition;import java.util.Scanner;/* 某星球存在两种生物,A种生物有1个头6条腿,B种生物有3个头4条腿.来自地球的太空船刚刚在 ...
- win10下载jdk并配置环境变量
win10下载jdk并配置环境变量 1. jdk下载 下载官网:Java SE开发套件15.0.2 2. jdk安装 一直点下一步就可以 3. 环境变量 配置 右键我的电脑--属性--高级系统设置-- ...