vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据
发布于2022-12-03 15:05 阅读(1061) 评论(0) 点赞(11) 收藏(1)
项目场景：
需要VantUI实现的功能
问题描述
vant中的picker选择器，只能用这种数组，来展示数据
columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’],
往往我们的请求数据，都是这样的。对象数组，需要id，也需要文字显示。
原因分析：
要实现的功能
我的选中项能展示名称，并且选中了还可以知道它的id。
解决方案：
步骤1、直接给 选择器数组 赋值为【对象数组】
<van-picker
title="请选择请假类型"
show-toolbar
:columns="leaveTypeList"
:key="" @confirm="onConfirmType"
@cancel="onCancelType">
</van-picker>
把res.data里面的对象数组，直接赋值给leaveTypeList
虽然显示会有问题，不过用担心，重点还在下一步！
步骤2、利用插槽，来展示对象数组里面的【属性】
把template代码更新进去
<van-picker title="请选择请假类型" show-toolbar :columns="leaveTypeList"
:key="" @confirm="onConfirmType" @cancel="onCancelType">
<template #option="option">
<div style="display: flex; flex-direction: column; align-items: center;">
<div>id：{{ option.id }}</div>
<div>名称：{{ option.name }}</div>
</div>
</template>
</van-picker>
可以发现，已经展示了我需要的数据。
选中了病假，如何获取id？？？
非常简单，我们选中会有下标，直接通过下图方式
用数组下标获取对象的属性值，非常简单。同时回显也做好了。
解决了因为数组不统一，导致2个数组，1个提取文字显示、然后多一个变量的复杂代码。
直接一个数组解决，能不用2个，就不用2个
所属网站分类: 技术文章 > 博客
作者：Hggh
链接：http://www.qianduanheidong.com/blog/article/459367/e1327afddddb068e1d7c/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力