欧亿体育
工作动态
我的位置: 首页 > 工作动态
vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据
发布时间:2024-01-27 11:03
  |  
阅读量:
  |  
作者:
欧亿体育

项目场景:


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