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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
js实现批量删除功能
Aug 27 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乱码问题
2012/03/25 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
Python数组遍历的简单实现方法小结
2016/04/27 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Django组件cookie与session的具体使用
2019/06/05 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
小学门卫岗位职责
2013/12/17 职场文书
车贷收入证明范本
2014/09/14 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
沈阳故宫导游词
2015/01/31 职场文书
廉洁自律证明
2015/06/24 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS