浅谈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 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
Angular路由简单学习
Dec 26 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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.ini中文版
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php实现加减法验证码代码
2014/02/14 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
JS编程小常识很有用
2012/11/26 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
通过实例了解python property属性
2019/11/01 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
进程的查看和调度分别使用什么命令
2013/12/14 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
在职员工证明书
2014/09/19 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
西双版纳导游词
2015/02/03 职场文书
投资合作意向书范本
2015/05/08 职场文书
刘胡兰观后感
2015/06/16 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python