elementUI select组件使用及注意事项详解


Posted in Javascript onMay 29, 2019

elementUI select组件使用详解

  • 动态生成option选项
  • option选项绑定对应的文本值和value值
  • 作为表单项目,新增、编辑功能
  • 对选项改变后触发相关事件
<div id="app">
  <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
    <el-form-item label="姓名选择" prop="typeId">
      <el-select v-model="form.typeId" placeholder="请选择" @change="change">
        <el-option v-for="item in items" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add()">新增</el-button>
      <el-button type="primary" @click="edit()">编辑</el-button>
      <el-button @click="cancel()">取消</el-button>
    </el-form-item>
  </el-form>
</div>
<script>
  var vm = new Vue({
    el:"#app",
    mounted(){
      this.getData();
    },
    data:{
      form:{
        typeId:''
      },
      items:[],
      datas:[{name:"senbo",id:'1'},{name:"muse",id:'2'},{name:"bobo",id:'3'}]
    },
    methods:{
      getData:function(){
        this.items = this.datas; 
        
      },
      add:function(){
        this.form.typeId = "";
      },
      cancel(){
         this.form.typeId = "";  
      },
      change:function(){
        console.log(this.form.typeId)
      },
      edit:function(){
        this.form.typeId ="1";
      }
    }
  })
</script>

当在使用select组件的时候,要注意

<el-select v-model="scope.row.state"
                @change="editDriftStatus"
                placeholder="请选择">
  <el-option v-for="item in drifStatusOptions"
                  :label="item.label"
                  :value="item.value">
  </el-option>
</el-select>

el-select  里面的v-model值要和el-option里面的value值对上,特别注意数据类型,之前value值写成字符串了,导致没效果

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

Javascript 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 #Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 #Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 #Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 #Javascript
vue-cli3中vue.config.js配置教程详解
May 29 #Javascript
详解vue-cli3开发Chrome插件实践
May 29 #Javascript
vue里的data要用return返回的原因浅析
May 28 #Javascript
You might like
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
视光学专业自荐信
2014/06/24 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
关于安全的广播稿
2014/10/23 职场文书