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 相关文章推荐
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
webpack的pitching loader详解
Sep 23 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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安装全攻略:APACHE
2006/10/09 PHP
php 字符转义 注意事项
2009/05/27 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php文档更新介绍
2011/07/22 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
js获取height和width的方法说明
2013/01/06 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python字典改变value值方法总结
2019/06/21 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Python 字典中的所有方法及用法
2020/06/10 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang