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组件的使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue中使用vant TreeSelect分类选择组件操作

    中文文档:TreeSelect 分类选择 效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • 使用vue实现各类弹出框组件

    简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar> 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值:v-model=&

  • Vant picker 多级联动操作

    官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q

  • 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="你要定义的名字",否则不会渲染 thi

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • Vue项目中封装组件的简单步骤记录

    Vue项目中封装组件的简单步骤记录

    目录 前言 如何封装一个Toast组件 使用案例 具体实现 总结 前言 随着业务的发展 功能性开发 已经无法满足我们对于前端的需求,这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景:公司内部组件库的开发,个人组件库的开发,与项目解耦,多项目中使用同一组件,只需维护一套组件库 如何封装一个Toast组件 组件说明: 实现提示功能. 效果展示: 实现的功能: 根据某个判断条件或者点击某个按钮,弹出弹框: 可配置位置,类型,样式名等 使用案例 1. 简单使用 vm.$toast('网络异

  • Vue.js中NaiveUI组件文字渐变的实现

    Vue.js中NaiveUI组件文字渐变的实现

    目录 前言 渐变文字 封装渐变组件 定义props 实现组件效果 前言 NaiveUI中有着一个非常有意思的组件,就是渐变文字组件,如下图: 有意思的点是这段文字描述这个东西看起来没啥用,实际上确实没啥用. 这里我们用Vue3.2+TS来实现这个简单的小组件. 渐变文字 渐变文字的实现比较简单,利用background-clip属性就可以实现,该属性存在一个text属性值,它可以将背景作为文字的前景色,配合渐变就可以实现渐变文字了, 示例代码如下: <span class="ywz-gra

  • Vant中List组件immediate-check=false无效的解决

    目录 Vant中List组件immediate-check=false无效 问题场景 解决方法 Vant list组件使用的坑 总结 Vant中List组件immediate-check=false无效 使用vant中的List组件时,会有这样的场景 初始化时想自己触发列表查询,而不想触发 List 组件自带的 load 方法,这时可以设置 immediate-check=false,如下代码,但是这种方式会在下面的场景中出现问题 <van-list ref="vanlist"

  • vant中field组件label属性两端对齐问题及解决

    vant中field组件label属性两端对齐问题及解决

    目录 field组件label属性两端对齐问题 先看看原来的四种效果 label左对齐 看看官方文档 另一种解决思路 vant输入框label两端对齐 field组件label属性两端对齐问题 最近在开发一个移动端的Web应用,使用vant构建移动端的页面,在构建表单时,使用Field组件作为信息输入和展示,但是但是由于对于label属性只提供了left.center.right的对齐方式,个人觉得不是很美观,希望能够显示两端对齐的效果. 先看看原来的四种效果 label左对齐 label居中对

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

  • vue.js中父组件调用子组件的内部方法示例

    前言 今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子

  • vue中兄弟组件传值的两种方式小结

    vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

随机推荐