uview 表单（uview常用组件案例操作及详解（一） 选择器 picker）

uview常用组件案例操作及详解（一） 选择器 picker

1.图片示例 2.使用方法

*为简便代码不提供样式

<view> <view> <text>行业性质</text> <text>*</text> </view> <view> <text v-if="!text.industry" @click="industrysTypeShow = true;">请选择</text> <text v-else @click="industrysTypeShow = true;">{{text.industry}}</text> <u-picker :show="industrysTypeShow" :columns="industrys" @confirm="industrysTypeConfirm" :defaultIndex="findIndex(detail.industry, industrys[0])" keyName="name" @cancel="cancel(industrysTypeShow)"></u-picker> <u-icon slot="right" name="arrow-right" @click="industrysTypeShow = true;"></u-icon> </view> </view> 3.效果 4.步骤详解 4.1涉及字段介绍（以下字段可替换成自己的） 4.1.1 text.industry:

在界面上显示选中值

4.1.2industrysTypeShow:

在data中注册    
    
    
，控制选择器的显示和隐藏 


     


     


   ，在data中赋值为false

4.1.3 industrys:

这是一个二维数组

 




 




 

，存放的是选择器内的选择值   

   

   

，如果你现在拿到的是一个一维数组Array  

     

     

  ，在他的外面包一个中括号即可变成二维数组


  




  




  
，形如[Array]

4.1.4industrysTypeConfirm:

这是一个方法  


  


  


，用于点击选择器右上角的确定后执行的动作   
     
     
 ，主要有两步：1.给界面text.industry赋值



   




   




   ，渲染文字 2.给后端字段赋值

industrysTypeConfirm(e) { this.detail.industry = e.value[0].theValue this.text.industry = e.value[0].name this.cancel(industrysTypeShow) }, 4.1.5cancel(‘industrysTypeShow’):

这是一个方法 



 



 



，用于点击选择器右上角的“取消    
    
    
”后执行的动作

cancel(visible) { this[visible] = false }, 4.1.6findIndex(detail.industry, industrys[0]): findIndex(code, list) { if (!code || !list) { return [0] } return [list.findIndex((item) => (item.code === code || item.theValue === code))] }, 4.2属性介绍（更多属性可参考uview官网） 4.2.1 :show

用于控制选择器的弹出与收起

4.2.2 :columns

设置每一列的数据              ，

4.2.3 @confirm

点击确定按钮




    




    




    ，返回当前选择的值

4.2.4 :defaultIndex

各列的默认索引













，即点开弹窗默认选中的

单列模式

如设置defaultIndex为[1]表示默认选中第2个(从0开始)               ，[5]表示选中第6个    
    
    
。

多列模式

如设置defaultIndex为[1, 3]表示第一列默认选中第2个



     



     



    ，第二列默认选中第4个 


     


     


   。 4.2.5 keyName

自定义需要展示的text属性键名













，适用于当二维数组里有很多字段

4.2.6 @cancel

点击取消按钮