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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
杏林同学录(九)
2006/10/09 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
Web程序工作原理详解
2014/12/25 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python生成验证码实例
2014/08/21 Python
Python中的多重装饰器
2015/04/11 Python
python插入排序算法实例分析
2015/07/03 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python对象的属性访问过程详解
2020/03/05 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
质量承诺书范文
2014/03/27 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
奠基仪式策划方案
2014/05/15 职场文书
公司档案管理制度
2015/08/05 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
nginx内存池源码解析
2021/11/20 Servers
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
vue特效之翻牌动画
2022/04/20 Vue.js