项目场景：

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