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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 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 采集程序中常用的函数
2009/12/09 PHP
php树型类实例
2014/12/05 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
JavaScript 常用函数
2009/12/30 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
暑假实习求职信范文
2013/09/22 职场文书
党校自我鉴定范文
2013/10/02 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
小学毕业感言300字
2014/02/19 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年教研工作总结
2015/05/23 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
python turtle绘图命令及案例
2021/11/23 Python