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

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. Chrome(谷歌浏览器)安装Vue插件vue-devtools

    安装步骤如下:1.首先给大家提供一个git地址,虽然官网也有地址(https://github.com/vuejs/vue-devtools.git),我认为不太好用给大家提供另一个git地址: ht ...

  2. 项目_1.3_手写SpringMVC框架

    初步修改项目 package com.hy.servlet; import java.io.IOException; import java.lang.reflect.InvocationTarget ...

  3. Android 隐藏和显示软键盘

    1 public static void hideKeyboard(View view){ 2 InputMethodManager imm = (InputMethodManager) view.g ...

  4. GOF23种设计模式是哪些

    设计模式实践里面提供了许多经久不衰的解决方案和最佳方案.这里,GOF 设计模式主要分为三大类:创建模式.结构模式和行为模式.创建模式对于创建对象实例非常有用.结构模式通过处理类或对象的组合来作用于企业 ...

  5. JavaWeb-动力节点

    目录 项目名 src |---- Servlet webapproot |------WEB-INF |------classes(存放字节码) |------lib(第三方jar包) |------ ...

  6. Flash、EEPROM、SRAM的区别与理解

    Flash.EEPROM.SRAM的区别与理解1. Flash.EEPROM.SRAM的区别(1) Flash存储器Flash适用于速度要求高.容量要求大.掉电时要求数据不丢失的场合. (2) EEP ...

  7. POJ--2689-C++

    题意很简单就是让你求给定区间的素数,然后用一个循环求出相距最远的相邻素数数和最近的素数以及相距最近的相邻素数 难点在与数据很大,所以不可能直接对区间的每一个数进行素数判断.但是,每个合数n都至少有一个 ...

  8. css 背景渐变

    1.渐变从左到右 background: linear-gradient(to right,#000,#fff); 2.渐变从上到下 background: linear-gradient(tobot ...

  9. 【APT】Bitter APT组织针对巴基斯坦航空综合部门攻击活动分析

    前言 蔓灵花(Bitter)是一个被广泛认为来自印度的APT组织,该组织长期针对我国及巴基斯坦的政府.军工.电力.核等部门发动网络攻击,窃取敏感数据,具有较强的政治背景.本次分享一个蔓灵花组织针对巴基 ...

  10. vue3 ts vite

    npm init vite@latest npm install -D sassnpm i vantnpm i vite-plugin-style-import@1.4.1 -Dvite.config ...