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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
JS高级程序设计之class继承重点详解
Jul 07 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php简单图像创建入门实例
2015/06/10 PHP
总结一些js自定义的函数
2006/08/05 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python分类测试代码实例汇总
2020/07/23 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
应届生求职推荐信
2013/10/28 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
公司建议书怎么写
2014/05/15 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android