vant的Picker 选择器渲染后端返回数据为数组对象时的渲染方法

最新推荐文章于 2024-06-20 17:41:16 发布
最新推荐文章于 2024-06-20 17:41:16 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： Picker 选择器 文章标签： html5 vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingwang_/article/details/120044551
版权
本文介绍如何在前端应用中使用Picker组件，并通过value-key参数来渲染后端返回的对象数据。通过设置show-toolbar属性、定义columns及绑定confirm、cancel和change事件，实现交互功能。
摘要由CSDN通过智能技术生成

Picker 选择器

在Picker 选择器的API中有value-key参数，加入到组件中即可。

<van-picker title="" show-toolbar value-key="groupName" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />

这样就可以渲染后端返回到的对象数据了

mingwang_
关注
专栏目录
picker多选 vant_Vant Picker 选择器
weixin_39737001的博客
12-20 4979
介绍提供多个选项集合供用户选择，支持单列选择和多列级联，通常与弹出层组件配合使用引入import Vue from 'vue';import { Picker } from 'vant';Vue.use(Picker);代码演示基础用法Picker 组件通过columns属性配置选项数据，columns是一个包含字符串或对象的数组import { Toast } from 'vant';exp...
picker多选 vant_vant的Picker 选择器
weixin_35056641的博客
02-19 1926
货物类型，两级分类，每列都要有不限选项，数据里没有不限选项，需要做数据变异，而且选择器是通过索引取值的，比较麻烦的地方就是，修改时获取的是类别id，需要在变异的数据中找到对应项并记录其索引clickablename="goodstypeval":value="goodstypeval"label="货物类型"placeholder="点击选择"v-on:click="columnsGoodsSho...
vant的Picker 选择器的数据回显
weixin_61978391的博客
03-12 3216
console.log("父级索引:", parentIndex);注意：这个需要计算出父级列和子级列对应的默认索引值，在Picker选择器改变时，可以用getColumnIndex来获取对应的索引值，但是考虑到Picker的对应的columnsregion可以会改变，这样在回显的时候可能会出现数据回显错误的情况，所以可以根据id来查找对应的索引值。
【vue】当vant中picker选择器的值为对象数组的解决方法
芳草萋萋鹦鹉洲哦
01-18 6971
vant官网中的":columns"绑定的是一个一维数组，如：[1,2,3,3,4]，但我们平常出现的都是一个对象数组，官网描述可能不好找到，解决方法： 添：value-key=“name”，name对应的数组对象中要渲染的键。 示范： <van-picker title="请选择所在地区" show-toolbar :columns="columns" value-key="name" @confirm="onConfirm" @cancel="show = false"
Vant2组件库的基础应用
最新发布
qq_44930306的博客
06-20 1300
页面初始化时加载初始列表方法，随着页面向下滚动和刷新，页面递增，此时发送请求，获取下一页数据，这个适用于vue2，只需要换成自己的接口和循环组件即可！点击field栏，选择本周时间，选中后将值回显（minDate和maxDate在方法里限制了范围，在确定事件里整理格式，然后赋值给field栏绑定的值）columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],="xx",因为它只能过滤头部和尾部的空格，而不能过滤中间的，所以自己再写了个方法。
把后台拿到的数据渲染在页面上 对象与数组的渲染方式示例
weixin_49393290的博客
12-06 6691
1、object对象篇 第一步 去data里声明一个对象 然后在方法里调这个接口 然后再network里查看后台返回过来的数据 然后您在获取数据成功之后接收数据 然后您在html中 呈现效果 2、v-if 数组篇 第一步遍历 这里是放了一个数组在这里接收 然后在调用方法时 数组在HTML调用就是 {{item.XXX}} ...
vant的picker组件，传值为对象数组，colunmsFieldNames属性
weixin_42683639的博客
12-08 3529
// 组件用法 colunmsFieldNames:用来确定展示内容的键（picker里面默认展示键text的值），具体用法如下： <van-picker title="标题" :columns="columns" @change="onChange" :colunmsFieldNames="{text:'name'}"/> // script <script setup lang="ts"> const columns = reactive([[ {i
react+ant-design(后台管理系统)Select组件下拉框Option动态渲染
yzkdcsdn的博客
02-18 4208
1.发送axios请求后端（这里就不展示了） 2.直接上干货 描述： 首先有form表单 其次有select组件 在这里我使用的是可以下拉搜索得（antd里面可以查到） 重点是这段代码 {dataSource && dataSource.map(item => ( <Option key={item.id}>{item.area}</Option>)) } 在这里要千万记住item箭头后面得渲染html得代码用圆括号（），而不是中括号{}！
js方法的封装
09-04 352
封装是为了更好的调用，当我们很多页面都需要同一种方法的时候，为了避免每个页面都需要进行重写方法，增加工作量，这个时候就需要我们对部分公共的方法进行封装，这样便于更好的进行调用 我在写接口的时候用到了 挺多方法，可能以后会需要进行重复使用，我就对代码进行了整改，把部分方法进行了封装，现在就来说说怎么封装和调用的 1.在写的方法中找到需要封装的部分 2.重建一个js文件，名字自己取，并...
浅谈vant组件Picker 选择器选单选问题
01-18
补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ 性别 value=user.gender click=isEditGenderShow> <!-- 编辑用户性别 --> <van-action-sheet v-model=isEditGenderShow :...
vant Picker 选择器数据处理的使用记录与坑
lucky_ax的博客
09-10 5989
总结使用vant 时遇到的一些问题 1, Field 输入框 Popup 弹出层 Picker 选择器 在使用过程中 发现很多官方API说的都不是很清楚 以下是使用实例 效果图 HTML部分 <li> <van-field clickable required is-link input-align="center"
picker多选 vant_vant框架picker选择器形式列表，以及封装
weixin_34305716的博客
01-12 2983
以下是VantUi插件中常用的各种选择器下拉列表，项目中遇到，就在这里总结以下，下面是代码第一种Vant-DropdownMenu下拉框单选形式Array=[{text:"东来汽车维修",value:0},{text:"广汽维修中心",value:1}]第二种picker选择器下拉框数组单列模式单选模式数组形式：['杭州','宁波','温州','嘉兴','湖州']re...
vant中van-picker选项插入图片
Sensation_cyq的博客
01-04 952
先上效果图： <template> <div class="hello"> <van-button type="primary" @click="filePicker = true">打开选择器</van-button> <van-popup v-model="filePicker" position="bottom"> <van-picker show-toolbar :columns="columns" @conf
vue中van-picker地区选择器 回显问题
a1085578081的博客
02-23 6490
项目前端用的是Vue框架，在接做微信端功能开发的时候，有一个地区联动选择器。效果如下： 前端代码： <van-popup v-model="showArea" position="bottom" :lazy-render='false'> <area-picker @confirm="confirmRegion" @close="showArea = false" ref="areaPicker"/> </van-popup> 此
antd-mobile中Picker选项更新的问题
关中刀客在青岛
02-10 1026
如图，Picker按钮上显示的数值是设备的设定温度，可以在点击后通过弹窗选项来修改这个设定温度。同时，设备端或其他手机端也可以修改这个温度，所以这个设定温度是随着设备的实际状态而实时变化的。每次打开弹窗时，选中项和当前显示的应该一致，即设备实际设定温度。
vant的picker组件数据更新时视图却没有更新
weixin_42180591的博客
12-03 1356
vant的picker组件数据更新时视图却没有更新
vant ，移动端实现渲染数组，图片上传的问题
weixin_43703816的博客
04-26 363
在开发移动端时，碰到了一个需求，在后端的返回的数组列表时，需要实时展示图片，并实现删除，以及增加的需求 因为需要对应相应的id, 看了vant 框架中的上传文件的组件。 感觉有点麻烦，只允许在成功的回调的函数中，传递一个file参数。后来上网查阅了一下，可以传递其他参数，但是自己没有看明白。 于是，想到了一个办法，可以在外层添加一个div , 给外层div加一个点击事件，通过事件进行传参，拿到对应的id , 进行相应的操作。 具体的...
vant-ui使用picker选择器渲染自定义数组
不靠谱的作曲家
05-18 514
官方文档中提供的渲染数组案例是以下这种形式。如果想渲染这种格式需要怎么解决？增加value-key参数。
【WXSS】小程序开发多重数组渲染
qq_15715891的博客
06-17 573
小程序开发中遇到的嵌套数组渲染问题只有下标， 没有字段 想要实现结果：标题与内容对应 从最外层循环开始捋，将数组的下标命名为。 相当于c中的,相当于。 内层循环是对context的循环 是对的循环，是父循环的下标。也就是 相当于 完整代码...
vant picker选择器
05-16
Vant Picker 是一个基于 Vue.js 框架的移动端选择器组件，可以用于选择日期、时间、省市区等信息。它具有以下特点： - 支持时间、日期、省市区等多种类型的选择器； - 支持自定义选择器的选项，如最大可选日期、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值