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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
潜说js对象和数组
May 25 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 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
PHP4中实现动态代理
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python中二维阵列的变换实例
2014/10/09 Python
Python入门篇之字典
2014/10/17 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python中列表的含义及用法
2020/05/26 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
职工运动会邀请函
2014/02/02 职场文书
小学体育教学随笔
2015/08/14 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python