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 相关文章推荐
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
vue项目实现多语言切换的思路
Sep 17 Javascript
四十九个javascript小知识实用技巧
Nov 20 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
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php blowfish加密解密算法
2016/07/02 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
python编程培训 python培训靠谱吗
2018/01/17 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
详解Python yaml模块
2020/09/23 Python
为什么group by 和order by会使查询变慢
2014/05/16 面试题
学期自我鉴定
2013/11/04 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
2015年售票员工作总结
2015/04/29 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Go归并排序算法的实现方法
2022/04/06 Golang