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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
js select option对象小结
Dec 20 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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 动态执行带有参数的类方法
2009/04/10 PHP
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
实例讲解Vue.js中router传参
2018/04/22 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
在python中bool函数的取值方法
2018/11/01 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python判断无向图环是否存在的示例
2019/11/22 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Django权限设置及验证方式
2020/05/13 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
爱游人:Travelliker
2017/09/05 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
总结Python使用过程中的bug
2021/06/18 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS