浅谈Vue Element中Select下拉框选取值的问题


Posted in Javascript onMarch 01, 2018

之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量。

html:

<el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> 
   <el-option style="width: auto" :disabled="true" :value="null"> 
    <span style="float: left;font-weight: bold">周次 </span> 
    <span style="float: left; color: #8492a6; font-size: 13px; font-weight: bold"> 开始日期 </span> 
    <span style="float: right; color: #8492a6; font-size: 13px; font-weight: bold"> 截止日期 </span> 
   </el-option> 
   <el-option v-for="(item,index) in res" :key="index" :label="item.mateGroup" v-bind:value="item"> 
    <span style="float: left; color: #8492a6; font-size: 13px">{{ item.mateGroup }} </span> 
    <span style="float: left; color: #8492a6; font-size: 13px"> {{ item.weekStartDate }}  </span> 
    <span style="float: right">{{ item.weekEndDate }}</span> 
   </el-option> 
  </el-select>

Js:

<script>
 import jQuery from 'jquery'
 export default {
  props: ['orgCode', 'farmOrg'],
  data () {
   return {
    res: [],
    ite: '',
    weekse: ''
   }
  },
  created: function () {
   var _self = this
   _self.getWeekYearly()
  },
  watch: {
   ite: function (val) {
    this.weekse = val
    console.log(this.weekse)
    this.getL()
   }
  },
  methods: {
   getWeekYearly () {
    var _self = this
    jQuery.ajax({
     url: '/standard/' + _self.orgCode + '/' + _self.farmOrg + '/getWeekly',
     type: 'GET',
     // contentType: 'application/json',
     dataType: 'json',
     success: function (res) {
      _self.res = res
     },
     fail: function (e) {
//      this.tableFlag = false
      alert('请求失败')
      console.log('查询失败')
     }
    })
   },
   getL: function () {
    var _self = this
    _self.$emit('getL', _self.weekse)
   }
  }
 }
</script>

下来我给大家说一下这个页面都做了什么-

a、在页面刚开始加载时候,通过create 调用了我们的一个方法。发送ajax.获取到下拉框该显示的值。

b、通过给select绑定一个model来监视和获取选中后的值.这里是ite

c、此处第一行option,我们写了一个固定表头, 以下通过option是通过created: funtion() 试页面加载后,立即访问后台,查询数据库,获取的下拉列表值,进行显示。

d、这里的value值.我们绑定成这条数据对象item.

Ps:这里大家肯定会想这不是很简单么?但是这里有一个坑,就是你选取的每一个值都会在下拉框中,显示成最后一个,但是实际value值是你选取的这个对象…看一看,是不是出现了,这个问题。

这个问题出现的原因是,在你option绑定key,和value时。该这些数据中有重复值导致的,造成数据对应不起..

这个问题我们需要怎么解决呢,Select值为对象类型时,需要提供一个 value-key 作为唯一性标识。

e、我们通过watch监听咱们select的model,在这个监听里面调用一个给父组件传值的方法..将咱们的item提供给父组件使用。

以上这篇浅谈Vue Element中Select下拉框选取值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
简单的js表格操作
Sep 24 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue.js 获取select中的value实例
Mar 01 #Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 #Javascript
在vue中封装可复用的组件方法
Mar 01 #Javascript
JavaScript判断日期时间差的实例代码
Mar 01 #Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 #Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 #Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 #Javascript
You might like
类之Prototype.js学习
2007/06/13 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
vue图片上传组件使用详解
2019/12/23 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
python下载文件记录黑名单的实现代码
2017/10/24 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
求职自荐信范文格式
2013/11/29 职场文书
八年级英语教学反思
2014/01/09 职场文书
音乐教学随笔感言
2014/02/19 职场文书
求职教师自荐书
2014/06/19 职场文书
好媳妇事迹材料
2014/12/24 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
导游词之千岛湖
2019/09/23 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL