使用Vant-Picker选择器遇到的问题呀~~

最新推荐文章于 2024-06-20 17:41:16 发布
最新推荐文章于 2024-06-20 17:41:16 发布
阅读量3.4k 收藏 6
点赞数 3
分类专栏： vant 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm13532007498/article/details/117448529
版权
在移动端项目中使用Vant框架的Picker组件时，遇到一些问题。主要涉及到如何设置`value-key`以及如何将后台返回的数据正确推送到`columnsRoleList`并进行显示。通过设置`value-key='name'`确保显示正确的列，并将后台数据处理后赋值给`columnsRoleList`，成功实现了组件的功能。
摘要由CSDN通过智能技术生成

**

使用Vant-Picker选择器遇到的问题呀~~

**
最近在做一个移动端项目，也是第一次接触Vant。之前项目使用的都是el-ui ，区别呢大同小异 ，但是就是脑子有时转不过来 。遇到了一些小问题，记录一下~~

下图的公司和角色都需要使用到picker这个组件

在这里插入图片描述

使用角色字段来举例子：

在这里插入图片描述
value-key=‘name’
在页面就是展示columnsRoleList里面name那一列
在这里插入图片描述
获取从后台返回的数据 Push到columnsRoleList
在这里插入图片描述
赋值
在这里插入图片描述
这样就可以啦 Yeah!

food-
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈vant组件Picker 选择器选单选问题
01-18
补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ 性别 value=user.gender click=isEditGenderShow> <!-- 编辑用户性别 --> <van-action-sheet v-model=isEditGenderShow :...
vant Picker组件踩坑
vera的博客
09-09 4519
如图 因需求要求，picker去掉顶部栏，点击下方确认按钮的时候获取选中的值 方法一：绑定change事件，选项改变时触发（但是有1s的延迟，操作太快了会取不到值，不可取） <van-picker :show-toolbar="true" :columns="reason" ref="picker" @change="change" /> <div class="btn" @click="handlePopSubmit('reason')"&g
vant 组件库使用中遇到的问题 —— vue
C_hydar的博客
12-05 1305
vant 使用过程遇到的问题
Vant2组件库的基础应用
最新发布
qq_44930306的博客
06-20 751
页面初始化时加载初始列表方法，随着页面向下滚动和刷新，页面递增，此时发送请求，获取下一页数据，这个适用于vue2，只需要换成自己的接口和循环组件即可！点击field栏，选择本周时间，选中后将值回显（minDate和maxDate在方法里限制了范围，在确定事件里整理格式，然后赋值给field栏绑定的值）columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],="xx",因为它只能过滤头部和尾部的空格，而不能过滤中间的，所以自己再写了个方法。
vant中tab标签栏下划线位置异常的解决方案
weixin_54217534的博客
07-16 3657
通过使用了vant2中的tab标签栏引入了vue项目，可以实现切换的效果，但在使用的过程中发现，标签栏的。我在渲染这个tab标签栏的组件使用了v-show的指令，导致了下划线位置出错的情况。在tab标签栏的tabs上有resize重绘这个方法，可以调用这个来解决这个问题。.如果项目中允许的话，可以将v-show改为v-if则可以解决这个问题。的情况，效果如下图所示，下划线位置和流行并没有对齐。在我的项目中我是用了第二种方法进行解决，效果如下。...
vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据
热门推荐
qq_51055690的博客
10-26 1万+
vantUI van-picker column
微信小程序picker标签页面显示和其他标签距离太大怎么办
weixin_35757531的博客
01-12 252
微信小程序中，可以通过设置 picker 组件的样式来控制它与其他标签的距离。可以在 CSS 样式中设置 picker 组件的 margin 和 padding 属性来控制它与其他标签的距离。此外，还可以通过设置容器元素的样式来影响 picker 组件的位置。 例如在设置 picker 的 class 样式的时候可以这样: .picker { margin-top: 10px; m...
Vant picker选择器设置默认值导致选择器失效
qq_25757181的博客
07-06 5294
vant 版本 >=2.12.27场景：自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项。html 代码： js代码： 问题：选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。问题定为：js代码中行位置： this.defaultIndex = this.value; // bug在这里。问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker
使用Vant完成DatetimePicker 日期的选择器操作
01-21
效果展示： 代码展示： <div id=date_time_picker> ... <van v-model=timeValue placeholder=选择的日期结果> <van v-model=show position=bottom xss=removed> ...van-datetime-picker v-model=c
微信小程序实现自定义picker选择器弹窗内容
08-27
在微信小程序中，使用默认的Picker选择器弹窗内容可能无法满足开发者的需求。例如，开发者可能需要根据特定的业务逻辑来设置选择器弹窗内容的样式和内容。因此，自定义Picker选择器弹窗内容是非常必要的。 知识点3...
Vant picker 多级联动操作
01-18
官网地址：链接 官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。 度娘也没有找到，花了大半天爬坑试错。...van-picker show-toolbar :columns=columns @cancel=showPicker = false @confirm=
vant 时间选择器–开始时间和结束时间实例
01-21
我就废话不多说了，大家还是直接看代码吧~ <div class=dateValueDiv v-if=allDateStart>{{dateFormatterStart}} <div class=dateValueD
van-picker选择器空白
m0_56860427的博客
08-19 1745
van-picker绑定的数据实在store里，在store里数据格式也是正确的，但是到页面里picker的选择项就是全空白， 在该路由中将该组件的keepalive设为了true,所以从别的页面回来的时候，picker绑定的数据不会重新获取，而该组件在初始的created里将picker的数据项写为了空数组，此时只需要在activated生命周期里重新给picker绑定的数据重新进行取值操作即可。 ...
vant组件搜索并选择_Vue 组件库 Vant 的 Picker 选择器使用问题汇总
weixin_39679370的博客
12-19 2752
van-popup 不显示bug 现象：触发 picker 弹出事件后，van-overlay 黑色背景已出现，但是包含 van-picker 的 van-popup 并未显示出来。Chrome 工具里看了一下， fixed 并未生效，虽然 position: fixed; 并没有被覆盖，但是显然是没有生效。StackOverflow 上搜索了一下，说可能是父级元素使用 transform 影响到...
关于 framework7 - picker组件 - 三级联动在ios上间距过大的问题。
梦想家小阿新的博客
08-17 1万+
安卓机型没问题，苹果错误示例如下图所示 解决方法： 1、监听机型 let mobile = navigator.userAgent.toLowerCase(); if(/iphone|ipad|ipod|mix2/.test(mobile)){ console.log('苹果机型') }else{ console.log('安卓机型') } 2、设置不同机型下的clas...
小程序 picker组件选中数据 无法显示
xx2410653967的博客
04-06 3867
若想获取到 picker组件里的值的话这样看是没有任何问题的 上代码： 那么问题来了： 注意：如果你是数组的话，选中数据但是无法显示选中的数据（一定得加objectArray） 然后。index 获取的是下标。我们要获取的是要显示的数据所以 这样就可以直接打印出来了 ...
IOS 13 升级16.2版本以上后 Picker选择器BUG,滑动异常、显示异常
weixin_55625066的博客
05-18 1361
分别在mui.picker.js 和 mui.picker.all.js 添加下面代码，判断IOS16.2以上版本webkitTransformOrigin样式不生效。商城添加收货地址时，3级联动选择地址，安卓手机显示，下滑都正常。但是苹果13 16.2版本以上下滑异常，下滑地址时出现跳动，选不中现象。根据各位大佬的解决方案，成功解决苹果13Picker选择器异常问题，下面是解决过程。经过测试，添加地址恢复正常，非常顺溜。
解决Vant Weapp的 van-datetime-picker组件在使用了filter属性后，默认值获取不到展示值
weixin_39844400的博客
04-13 2689
解决Vant Weapp的 van-datetime-picker组件在使用了filter属性后，默认值获取不到展示值，比较笨的方法 如上图，点击展开时间选择后，由于使用了filter属性，分钟数是指定了可选范围，此时不去滑动列表触发change事件，那么得到的时间就不为所展示的时间。 index.wxml <van-popup show="{{ showDatePicker }}" position="bottom" bind:close="hiddenDatePicke
Vant_Picker_选择器(搭配弹出层使用)
骑大马挎大刀
01-17 3354
生成0到100之间[0,100)的随机int值 // 与当前线程隔离,一个线程获得的随机数不受另一个线程的影响 ThreadLocalRandom.current().nextInt(0,100); //全局提供随机数 Random random = new Random(); random.nextInt(100);
vant的picker选择器多选
09-01
Vant的picker选择器是一款功能强大的多选组件。在使用这个组件时，可以通过设置`picker`的`columns`属性来实现多选功能。在`columns`属性中，可以指定多个选项供用户选择。 首先，我们需要确定`picker`的类型为`columns`，这样才能实现多选功能。然后，我们需要创建一个数据源数组，用于填充`picker`选择器的选项。数组中的每一项都是一个对象，包含两个属性：`text`和`value`。`text`属性表示选项显示的文本，`value`属性表示选项对应的值。 接下来，我们可以使用`picker`组件的`v-model`绑定一个变量来接收用户选择的值。这个变量可以是一个数组，用于存储用户选择的多个值。 同时，我们还可以通过设置`picker`的`show-toolbar`属性来显示工具栏，以便用户确认选择。工具栏中可以包含确定和取消按钮，方便用户进行操作。 最后，在用户进行选择后，通过对绑定的变量进行操作，我们就可以获取到用户选择的多个值。 总结来说，Vant的picker选择器多选功能可以通过设置`picker`的`columns`属性和绑定一个数组变量来实现。用户可以通过选择多个选项，然后点击确定按钮进行确认操作。这样就可以方便地实现多选功能了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值