vue vant中picker组件的使用

 更新时间:2020年11月03日 09:33:48   作者:月落星河°  
这篇文章主要介绍了vue vant中picker组件的使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1、引入

import { Picker } from 'vant'

2、使用

 components: {
 vanPicker: Picker,
 }

3、渲染

 <van-picker
 show-toolbar
 :columns="columns"
 value-key="text"
 />

4、将值push到columns

 //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染
 this.columns = [
  {
  siteState: 1,
  text: "装机开业"
  },
  {
  siteState: 2,
  text: "装机停业"
  },
  {
  siteState: 3,
  text: "未装机开业"
  },
  {
  siteState: 4,
  text: "未装机停业"
  },
  {
  siteState: 5,
  text: "其他"
  }
 ];

补充知识:vant-ui之Field输入框和Picker结合使用时,如何绑定正确的id类型的值的问题。

很常见的需求:

表单中的一项,需要从picker控件中选择正确的值后,展示的是字符串,然后提交到后台服务器的则是字符串对应的value类型的值的问题。

点击表单的档案组,弹出Picker选择组件,选择正确的值,填充到表单项,但是,提交到服务器去,需要提交对应的id,而不是看到的字符串。

如何实现?

实现方式一:

定义两个属性,classId和className, 她两是一 一对应的关系。

data() {
 return {
 classId: -1,
 className: "全部",
 columns: [
 { text: '全部', value: -1 },
 { text: '未分组', value: 0 },
 { text: '访客', value: 1 },
 ],
 },
}

van-field中绑定className

 <van-field
  readonly
  clickable
  name="picker"
  :value="className"
  label="档案组"
  placeholder=""
  @click="showClassPicker = true"
 />

然后在van-picker中,绑定的confirm函数,参数获取到的是一个对象。

在这个函数内,同时更新className和classId,保证他俩一 一对应。

 <van-popup v-model="showClassPicker" position="bottom">
 <van-picker
 show-toolbar
 :columns="columns"
 @confirm="onClassConfirm"
 @cancel="showClassPicker = false"
 />
 </van-popup>
 onClassConfirm(v) {
 this.classId = v.value;
 this.className = v.text;
 this.showClassPicker = false;
 },

这样就可以了。用户在表单中看到的是字符串,而提交给后台的,则是与这个字符串一 一对应的id值。

方式二:

van-field中依然还是使用value类型的值,只是需要给这个值,一个filter过滤器,转换为正确的字符串显示,但是提交给后台的,却是value类型的值,譬如id

以上这篇vue vant中picker组件的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element-ui upload组件上传文件类型限制问题小结

    element-ui upload组件上传文件类型限制问题小结

    最近我遇到这样的问题,接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了,下面小编给大家介绍element-ui upload组件上传文件类型限制问题小结,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue配置环境变量的正确打开方式

    Vue配置环境变量的正确打开方式

    这篇文章主要为大家介绍了Vue配置环境变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue中常见混淆用法汇总

    Vue中常见混淆用法汇总

    本文主要介绍了在Vue中使用的一些常见混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器对代码进行加固,需要的可以参考下
    2023-12-12
  • vue指令以及dom操作详解

    vue指令以及dom操作详解

    本篇文章主要介绍了vue指令以及dom操作详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    这篇文章主要介绍了在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue实现登录后页面跳转到之前页面

    vue实现登录后页面跳转到之前页面

    本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能,有这方便需要的朋友学习参考下吧。
    2018-01-01
  • vue3+vite项目中显示SVG图片的实现

    vue3+vite项目中显示SVG图片的实现

    vite-plugin-svg-icons是一个Vite插件,其作用是将SVG图标文件转换为Vue组件,本文主要介绍了vue3+vite项目中显示SVG图片的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • Vue.js实现可排序的表格组件功能示例

    Vue.js实现可排序的表格组件功能示例

    这篇文章主要介绍了Vue.js实现可排序的表格组件功能,涉及vue.js事件响应、元素动态操作、排序、运算等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • vxe-table vue table 表格组件功能

    vxe-table vue table 表格组件功能

    这篇文章主要介绍了vxe-table vue table 表格组件功能,功能非常强大,文中给大家提到了功能点,需要的朋友可以参考下
    2019-05-05
  • VUE 更好的 ajax 上传处理 axios.js实现代码

    VUE 更好的 ajax 上传处理 axios.js实现代码

    本篇文章主要介绍了VUE 更好的 ajax 上传处理 axios.js实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论