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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
Cakephp 执行主要流程
2010/03/24 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Javascript模板技术
2007/04/27 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
python smtplib发送带附件邮件小程序
2018/05/22 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
学生会竞选自荐信
2013/10/12 职场文书
正规的求职信范文分享
2013/12/11 职场文书
实习推荐信
2014/05/10 职场文书
股份合作协议书
2014/09/10 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
避暑山庄导游词
2015/02/04 职场文书
离婚案件答辩状
2015/05/22 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Nginx配置使用详解
2022/07/07 Servers