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 字符串连接性能优化
Dec 20 Javascript
js实现div弹出层的方法
Nov 20 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
js常见遍历操作小结
Jun 06 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
浅谈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使用websocket示例详解
2014/03/12 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
动态加载js的几种方法
2006/10/23 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Transpose 数组行列转置的限制方式
2020/02/11 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server