uni-app 中的 picker 元件基于背景對象數組資料格式的使用

• ​​view:​​
• ​​data:​​
• ​​普通數組：​​
• ​​總結​​

• ​​結語​​

view:

<view class="uni-list">
                <view class="uni-list-cell">
                    <view class="uni-list-cell-db">
                        <picker mode="selector" v-model="pSId" @change="bindPickerChange" :value="index"
                            :range="pSNames" range-key="pSName">
                            <view class="flex picker">
                                <view class='flex-item margin-lg'>我選擇：{{pSNames[index].pSName}}

                                </view>

                            </view>
                        </picker>
                    </view>
                </view>
            </view>      

data:

<script>
    
    export default {
        data() {
            return {
                
                pSId: '',
                
                pSNames: [{
                    "pSId": "",
                    "pSName": ""
                }],
                index: 0,
                pSName: ""
                
            };
        },

    methods: {
bindPickerChange(e) {
                console.log(e)
                this.index = e.detail.value
                this.pSId = this.pSNames[e.detail.value].pSId
                console.log(this.pSId)
            },
    }      

PS:

普通數組：

<view class="uni-list-cell-db">  
     <picker @change="bindPickerChange" :value="index" :range="array">  
       <view class="uni-input">{{array[index]}}</view>  
    </picker>  
  </view>  
export default {  
    data() {        
        return {            
            array: ['中國', '俄國'],  
            index: 0,  
        }  
    },  
    methods: {  
        bindPickerChange: function(e) {  
            console.log('picker發送選擇改變，攜帶值為', e.target.value)  
            this.index = e.target.value  
        },  
    }  
}      

重點分析：

1. ​

   ​range='{{objectArray}}'​

   ​ 指定對象數組
2. ​

   ​range-key="{{'name'}}"​

   ​​ 指定 range-key，即指定使用​

   ​objectArray​

   ​​中的​

   ​name​

   ​屬性來作為選擇器中顯示的内容，這裡需要注意取出的屬性外加了‘’号，即‘name’,引号不可少
3. ​

   ​value='{{objectArray[rangekey].value}}'​

   ​​ ，​

   ​rangekey​

   ​​是js中定義的對象數組的下标，​

   ​objectArray[rangekey]​

   ​​取出的是改下标的對象，如​

   ​{id: 1,name: '蘋果',price: 18.6}​

   ​​，而​

   ​objectArray[rangekey].value​

   ​​中​

   ​value​

   ​​值表示的是​

   ​range-key​

   ​​中指定的屬性，這裡是​

   ​name​

   ​，即蘋果。
4. 最終展示選中的内容​

   ​{{objectArray[rangekey].price}} 元​

   ​​，仍然是通過數組的下标擷取，隻是這裡取出的是對象，​

   ​.price​

   ​取出對象中的價格。

總結

結語