vue vant中picker组件的使用


Posted in Javascript onNovember 03, 2020

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类型的值的问题。

vue vant中picker组件的使用

点击表单的档案组,弹出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组件的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 #Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 #Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 #Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 #Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 #Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 #Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 #Javascript
You might like
人大复印资料处理程序_补充篇
2006/10/09 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
easyui validatebox验证
2016/04/29 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python学生管理系统代码实现
2020/04/05 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python使用knn实现特征向量分类
2018/12/26 Python
python 画函数曲线示例
2019/12/04 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
机械操作工岗位职责
2014/08/08 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
go web 预防跨站脚本的实现方式
2021/06/11 Golang
排查Tomcat进程假死的问题
2022/05/06 Servers