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

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. 获取内存及cpu信息

    <dependency> <groupId>com.github.oshi</groupId> <artifactId>oshi-core</ar ...

  2. Web Uploader上传文件

    Web Uploader是百度提供的. 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Uploader文件上传需要引入三种资源:JS, ...

  3. Screw数据库文档生成神器

    引入依赖 <dependency> <groupId>cn.smallbun.screw</groupId> <artifactId>screw-cor ...

  4. 【mysql练习】转置,总计,分组

    1,有如下一个表,要求把这个表按照2016,2017,2018,2019,把从1月到12月的金额展示出来. profit表: year month amount2019 1 52019 3 62018 ...

  5. pytorch学习笔记(9)--损失函数

    1.损失函数的作用: (1)计算实际输出和目标输出之间的差距: (2)为我们更新输出提供一定的依据(也就是反向传播) 官网链接:https://pytorch.org/docs/1.8.1/nn.ht ...

  6. go实现ls

    package mainimport ( "fmt" "log" "os")func main () { f,err :=os.Open(& ...

  7. IIS10.0 Web平台安装程序无法安装URL重写工具

    Windows10系统的IIS10.0需要安装URL rewrite重写模块2.0,提示"很遗憾,无法安装下列产品",解决方法: win键+R键,运行regedit,打开注册表编辑 ...

  8. spring-nfjh

    Spring Xml 文件报红第一时间检查set .get .构造方法 准备工作 JDK 最低版本17 设置Maven 见[王鹤老师的笔记] 本套Spring教程与其他Spring教程的区别可总结为以 ...

  9. Myeclipse导入项目提示已存在(Some projects cannot be imported because they already exist in the workspace)

    原因:在项目空间的文件夹中没有删除干净之前的项目,之前的项目和要导入的项目的名字相同,所以导致无法将项目导入.需要在项目空间中将有关的旧文件都清理干净. 1.将项目空间文件夹中的项目删除. 2.到:\ ...

  10. python+selenium实现自动识别验证码并登录

    最近学习python+selenium实现网站的自动登录,但是遇到需要输入验证码的问题,经过查询百度收获了几种破解验证码的方式. 方式一)从万能的网友那收获了一个小众但非常实用的第3方库ddddocr ...