vantUI 获得piker选中值的自定义ID操作


Posted in Javascript onNovember 04, 2020

问题

官网中给的picker例子,每项只能是个字符串,但我需要它返回每个字符串对应的自定义ID,而不是index。

vantUI官网:picker

官网例子

<van-picker :columns="columns" @change="onChange" />

export default {
 data() {
  return {
   columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
  };
 },
 methods: {
  onChange(picker, value, index) {
   console.log('当前值'+value+ '当前索引'+index);
  }
 }
};

解决

现在我的需求是获得选中的值的id,而不是要这个index,所以只能用对象数组,看到官网上的禁用例子的数组中:{ text: '杭州', disabled: true },说明确实每行的数据是个对象的,而显示的部分就是text的值。

那就照着这个来呗!

export default {
 data() {
  return {
  //改一下
   columns: [
    {"keyId":2,"text":"测试1"},
    {"keyId":10,"text":"测试2"},
    {"keyId":31,"text":"测试3"}
   ],
   
  };
 },
 methods: {
  onChange(picker, value, index) {
   //此时返回的value就是个对象了
   var keyId = value.keyId;
   var text= value.text;
   console.log('当前值'+keyId + '当前索引'+text);
  }
 }
};

vantUI 获得piker选中值的自定义ID操作

补充知识:vantUI时间选择器将选中值改为 yyyy-mm-dd 00:00:00 格式

vantUI时间选择器默认选中值为:

vantUI 获得piker选中值的自定义ID操作

更改之后

vantUI 获得piker选中值的自定义ID操作

代码如下

<van-popup v-model="startTimeshow" position="bottom" :overlay="true">
   <van-datetime-picker
    @cancel="Cancel"
    @confirm="Confirm"
    @change="Change"
    v-model="currentDate"
    type="date"
   />
  </van-popup>
data() {
  return {
   currentDate: new Date()
  };
 },
methods:{
Change(){
console.log(this.currentDate);
 var date = this.currentDate;
   var seperator1 = "-";
   var seperator2 = ":";
   var month = date.getMonth() + 1;
   var strDate = date.getDate();
   if (month >= 1 && month <= 9) {
    month = "0" + month;
   }
   if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
   }
   this.currentdate =
    date.getFullYear() +
    seperator1 +
    month +
    seperator1 +
    strDate +
    " " +
    "00" +
    seperator2 +
    "00" +
    seperator2 +
    "00";
} 
}

以上这篇vantUI 获得piker选中值的自定义ID操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
浅谈vant组件Picker 选择器选单选问题
Nov 04 #Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 #Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 #Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 #Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
You might like
php 错误处理经验分享
2011/10/11 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python 画出来六维图
2019/07/26 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
深入了解Python enumerate和zip
2020/07/16 Python
8种常用的Python工具
2020/08/05 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
儿科主治医生个人求职信
2013/09/23 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书