VUE动态加载picker下拉框

例如：后台加载的字段为

[{"LOCATION_TYPE":"LW0501","LOCATION_DESC":"成品仓5楼5-1成品呆滞仓"},{"LOCATION_TYPE":"LW0502","LOCATION_DESC":"成品仓5楼5-2成品备货仓"},{"LOCATION_TYPE":"LW0503","LOCATION_DESC":"成品仓5楼5-3惠州电芯仓"},{"LOCATION_TYPE":"LW0504","LOCATION_DESC":"成品仓5楼5-4极片仓"},{"LOCATION_TYPE":"LW0505","LOCATION_DESC":"成品仓5楼5-5提库返工仓"}]

直接贴代码：

<template>
    <view class="picker-border">
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前仓库
                </view>
                <view class="uni-list-cell-db" v-if="locationArray!=''">
                    <picker @change="bindPickerChange" mode="selector" :value="index" :range="locationArray" :range-key="'LOCATION_DESC'">
                        <view class="uni-input">{{locationArray[index].LOCATION_DESC}}</view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                index:0,
                locationArray:''
            }
        },
        methods:{
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.target.value)
                this.index = e.target.value
                console.log(this.locationArray[this.index].LOCATION_TYPE)
            },
            // 获取仓库信息
            getLocation(){
                uni.request({
                    url: this.$common.url+"LoginApi/getLocation", 
                    data: {},
                    success: (res) => {
                        if(res.data.status==false){
                            uni.showModal({
                                title: '错误',
                                content: res.data.errMessage,
                                showCancel:false
                            });
                        }else{
                            this.locationArray=res.data;
                            console.log(this.locationArray[0])
                        }
                    },
                    fail:(err)=>{
                        uni.showModal({
                            title: '错误',
                            content: '获取仓库信息失败！'+err,
                            showCancel:false
                        });
                    }
                });
            },
            onLoad() {
                this.getLocation()
            }
        }
    }
</script>

<style>
    .picker-border{
        border: 1rpx #0A98D5 solid;
    }
</style>

最终页面：