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

项目场景：

需要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个