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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
Javascript 入门基础学习
Mar 10 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 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批量采集下载美女图片的实现代码
2013/06/03 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Python continue语句用法实例
2014/03/11 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python的变量与赋值详细分析
2017/11/08 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Django 限制访问频率的思路详解
2019/12/24 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
党校党性分析材料
2014/12/19 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
python如何做代码性能分析
2021/04/26 Python