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 自动安装exe程序
Nov 30 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
vue filter 完美时间日期格式的代码
Aug 14 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP多个版本的分析解释
2011/07/21 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP使用函数用法详解
2018/09/30 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python虚拟环境项目实例
2017/11/20 Python
python书籍信息爬虫实例
2018/03/19 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
蛋白质世界:Protein World
2017/11/23 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
店长职务说明书
2014/02/04 职场文书
小学语文课后反思精选
2014/04/25 职场文书
个人求职信范文
2014/05/24 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
好人好事演讲稿
2014/09/01 职场文书
培训后的感想
2015/08/07 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang