浅谈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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
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
PHP系统命令函数使用分析
2013/07/05 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php简单分页类实现方法
2015/02/26 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python使用三种方法实现PCA算法
2017/12/12 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
入股协议书
2014/04/14 职场文书
群教个人对照检查材料
2014/08/20 职场文书
2014年民警工作总结
2014/11/25 职场文书
健康教育主题班会
2015/08/14 职场文书
如何理解及使用Python闭包
2021/06/01 Python