vantUI 获得piker选中值的自定义ID操作

 更新时间:2020年11月04日 09:44:22   作者:HYeeee  
这篇文章主要介绍了vantUI 获得piker选中值的自定义ID操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题

官网中给的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时间选择器将选中值改为 yyyy-mm-dd 00:00:00 格式

vantUI时间选择器默认选中值为:

更改之后

代码如下

<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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中router-link如何添加mouseover提示

    Vue中router-link如何添加mouseover提示

    这篇文章主要介绍了Vue中router-link如何添加mouseover提示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • 解决vue初始化项目时,一直卡在Project description上的问题

    解决vue初始化项目时,一直卡在Project description上的问题

    今天小编就为大家分享一篇解决vue初始化项目时,一直卡在Project description上的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    本文主要介绍了M1 pro芯片启动Vue项目的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据。这篇文章主要给大家介绍Vue el-autocomplete远程搜索下拉框并实现自动填充功能,感兴趣的朋友一起看看吧
    2019-10-10
  • Vue科学计数法常见处理方法举例

    Vue科学计数法常见处理方法举例

    这篇文章主要给大家介绍了关于Vue科学计数法常见处理方法的相关资料,科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,文中给出了详细的代码示例,需要的朋友可以参考下
    2024-02-02
  • Vue2响应式系统之嵌套

    Vue2响应式系统之嵌套

    这篇文章主要介绍了Vue响应式系统之嵌套,我们在开发中肯定存在组件嵌套组件的情况,下文将举例说明情况,需要的小伙伴可以参考一下
    2022-04-04
  • Vue下拉选择框Select组件使用详解(二)

    Vue下拉选择框Select组件使用详解(二)

    这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 使用vue制作FullPage页面滚动效果

    使用vue制作FullPage页面滚动效果

    本篇文章主要介绍了使用vue制作FullPage页面滚动效果,详细的介绍了FullPage页面的思路和实现,有兴趣的可以了解一下
    2017-08-08
  • element-ui 本地化使用教程详解

    element-ui 本地化使用教程详解

    这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue中的slot封装组件弹窗

    vue中的slot封装组件弹窗

    这篇文章主要介绍了vue中的slot封装组件弹窗,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论