位置: IT常识 - 正文

vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据

编辑：rootadmin

vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据项目场景：

推荐整理分享vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

需要VantUI实现的功能

问题描述

vant中的picker选择器，只能用这种数组，来展示数据

columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’],

往往我们的请求数据，都是这样的。对象数组，需要id，也需要文字显示。

原因分析：

vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据

要实现的功能我的选中项能展示名称，并且选中了还可以知道它的id。

解决方案：步骤1、直接给选择器数组赋值为【对象数组】<van-pickertitle="请选择请假类型" 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个

本文链接地址:https://www.jiuchutong.com/zhishi/283251.html 转载请保留说明！

上一篇：最好的版本是什么?适合Linux新手的2017最佳发行版(市面最高版本)

下一篇：hpzstatn.exe是什么进程有什么作用 hpzstatn进程查询(hp是什么软件)