下拉框应该是大家非常常用的一个组件,表单几乎离不开它,可是用了三年后我突然发现我一直没有正确的使用它。。。。。

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的正确用法的更多相关文章

  1. python 防止sql注入字符串拼接的正确用法

    在使用pymysql模块时,在使用字符串拼接的注意事项错误用法1 sql='select * from where id="%d" and name="%s" ...

  2. MySQL的select for update用法

    MySQL中的select for update大家应该都有所接触,但什么时候该去使用,以及有哪些需要注意的地方会有很多不清楚的地方,我把我如何使用和查询到的文档在此记录. 作用 select本身是一 ...

  3. Spring MVC中Session的正确用法<转>

    Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...

  4. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  5. C#中dynamic的正确用法

    C#中dynamic的正确用法  http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4 ...

  6. C# string.Split对于换行符的分隔正确用法

    C# string.Split对于换行符的分隔正确用法 tmpCase "11117144-8c91-4817-9b92-99ec2f9d784a\r\n23D95A26-012C-4332 ...

  7. 【转】Spring MVC中Session的正确用法之我见

    Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...

  8. 转载~kxcfzyk:Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解

    Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解   多线程c语言linuxsemaphore条件变量 (本文的读者定位是了解Pthread常用多线程API和Pthread互斥锁 ...

  9. C#中dynamic的正确用法 以及 typeof(DynamicSample).GetMethod("Add");

    dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...

  10. MySQL select into outfile用法

    select into outfile用法 SELECT ... FROM TABLE_A INTO OUTFILE "/path/to/file" FIELDS TERMINAT ...

随机推荐

  1. ABAP 删除内表重复数据

    SORT <内表> BY <字段> [ascending/descending]. DELETE ADJACENT DUPLICATES FROM <内表> COM ...

  2. CF513F2 题解

    题意 传送门 有 \(a+b+1\) 个会动的棋子,在一个大小为 \(n\times m\) 的棋盘上,棋盘上有一些点有障碍.棋子中,有 \(a\) 个红色棋子,\(b\) 个蓝色棋子,和 \(1\) ...

  3. WCF部署HTTP错误404.3

    错误:WCF部署HTTP错误404.3-Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加MIME映射. 解决步骤如下: 控制面板-& ...

  4. Java流程控制练习

    练习 打印三角形及Debug的使用 public class TestDemo { public static void main(String[] args) { //打印三角形 5行 for(in ...

  5. 使用骨架创建maven的web工程 maven工程servlet实例之间指定web资源包 实例之导入项目依赖的jar包 maven工程servlet实例之jar包冲突解决

     使用骨架创建maven的web工程 操作一样把勾进行勾选找到webapp选项 下一步创建就行 创建好会有显示 目录结构其余的都需要自己手动补齐 有小蓝点的才是一个web项目, 如果上面都正确的话没有 ...

  6. java 泛型使用

    泛型类 // 简单泛型 class Point<T>{ // 此处可以随便写标识符号,T是type的简称 private T var ; public T getVar(){ return ...

  7. 从Sql Server转战Oracle 之 变量声明

    1 --两种声明方法:没有sql所谓的select或者select @para from table 以及 set 赋值,且赋值的时候需要在begin end事务内 2 一 直接声明 3 declar ...

  8. 不用画的动画——ShaderCp11

    --20.9.14 Shader中主要有及两种动画,一种就是纹理动画还有一种就是顶点动画. 动画效果一般都需要把时间加入一些变量的计算,以便画面可以随时间发生变化.下面是Shader中的如何去访问时间 ...

  9. ubuntu安装samba服务

    第一步  sudo apt-get install samba samba-common 安装完成 第二步 建立一个文件夹作为共享目录 sudo mkdir /home/yz/my_samba my_ ...

  10. python更改图片后缀名为jpg格式

    1 import os 2 import cv2 3 class GeneDataset(): 4 def __init__(self,rootdir): 5 self.rootdir = rootd ...