elementUI select组件默认选中效果实现的方法


Posted in Javascript onMarch 25, 2019

首先,v-model的值为当前被选中的el-option的 value 属性值

需求:进入编辑页面,状态栏默认选中生效,如下显示:

elementUI select组件默认选中效果实现的方法

html部分代码:

<el-form-item label="状态">
  <el-select v-model="form.status" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

data的form中定义status属性:

elementUI select组件默认选中效果实现的方法

再看data中options的定义,options为选择框中所有的可选内容,有label属性(某一项的名字)和value属性(某一项的具体的值),value才是我们需要的值,也是传到后端的值,而label是展示给用户看的值,重复一点:v-model的值为当前被选中的el-option的 value 属性值

options: [{
      value: '1',
      label: '生效'
    }, {
      value: '2',
      label: '失效'
    }],

因此,如果需要默认选中生效选项,需要把生效对应的value赋给el-select的v-model

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript是怎么继承的介绍
Jan 05 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
Promise静态四兄弟实现示例详解
Jul 07 Javascript
详解javascript函数写法大全
Mar 25 #Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
Javascript的this详解
Mar 23 #Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 #Javascript
vue中组件的3种使用方式详解
Mar 23 #Javascript
ES6入门教程之Array.from()方法
Mar 23 #Javascript
You might like
php字符串过滤与替换小结
2015/01/26 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
九年级科学教学反思
2014/01/29 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
2014年收银工作总结
2014/11/13 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android