Project scenario:

insert image description here
Functions that need to be implemented by VantUI

Problem Description

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

columns: ['Hangzhou', 'Ningbo', 'Wenzhou', 'Shaoxing', 'Huzhou', 'Jiaxing', 'Jinhua', 'Quzhou'],

insert image description here
Often our request data is like this. Object array, need id, also need text display.

Cause Analysis:

function to be implemented
insert image description here
My selected items can showname, and you can also know its id if it is selected.

solution:

Step 1. Directly assign the selector array to [object array]

<van-picker 
title="请选择请假类型" 
show-toolbar 
:columns="leaveTypeList" 
:key="" @confirm="onConfirmType"
@cancel="onCancelType">
</van-picker>

Assign the object array in res.data directly to leaveTypeList

Although there will be problems in the display, don’t worry, the focus is still on the next step!
insert image description here

Step 2. Use the slot to display the [properties] in the object array

Update the template code into it

<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>

insert image description here
It can be found that the data I need has been displayed.

How to get the id when sick leave is selected? ? ?

very simple, there will be a subscript when we select it, and
insert image description here
it is very simple to use the array subscript to obtain the attribute value of the object directly through the method shown in the figure below. At the same time, the echo is also done.

Solved the complex code that caused 2 arrays, 1 to extract text and display, and then one more variable because the arrays were not uniform.

Solve it directly with an array, if you can use 2, you don’t need 2

The column in vantUI van-picker is used, the picker selector displays the properties in the object array, and customizes the display data