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高级程序设计 事件学习笔记
Sep 10 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
浅谈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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
详解php中的implements 使用
2017/06/13 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript常用的方法整理
2015/08/20 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python创建xml的方法
2015/03/10 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python使用PyQt5的简单方法
2019/02/27 Python
python绘制漏斗图步骤详解
2019/03/04 Python
详解python数据结构和算法
2019/04/18 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
在python3中实现更新界面
2020/02/21 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
建筑项目策划书
2014/01/13 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
服务标语大全
2014/06/18 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
大雁塔导游词
2015/02/04 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers