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 相关文章推荐
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
javascript中layim之查找好友查找群组
Feb 06 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中如何调用用户自定义函数
2013/08/06 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python类的用法实例浅析
2015/05/27 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python实现机器学习之元线性回归
2018/09/06 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
《再见了,亲人》教学反思
2014/02/26 职场文书
优秀员工评优方案
2014/06/13 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书