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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
js倒计时显示实例
Dec 11 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
微信小程序实现聊天室
Aug 21 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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嵌套输出缓冲代码实例
2015/05/12 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
Javascript中的getter和setter初识
2017/08/17 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
python入门教程之识别验证码
2017/03/04 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
党员自我评价分享
2013/12/13 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
应届生求职信范文
2014/05/26 职场文书
小学生安全责任书
2014/07/25 职场文书
酒店前台岗位职责
2015/04/16 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript