项目场景：

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