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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP中“=&gt;
2019/03/01 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
利用python批量检查网站的可用性
2016/09/09 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python中time.ctime()实例用法
2021/02/03 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
工地质量标语
2014/06/12 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Django中session进行权限管理的使用
2021/07/09 Python
Python实现数据的序列化操作详解
2022/07/07 Python