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 回调函数中变量作用域的讨论
Sep 11 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
jQuery Selector选择器小结
May 06 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 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代码实现支付宝批量付款
2015/12/24 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
校园绿化美化方案
2014/06/08 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
法人身份证明书
2014/10/08 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Redis性能监控的实现
2021/07/09 Redis
详解Vue router路由
2021/11/20 Vue.js