u-select的使用(多列联动)

2021-09-06  本文已影响0人  jing_bao

template

/*其中v-model 布尔值变量,用于控制选择器的弹出与收起
default-value 默认选中的下标
confirm-color 确认按钮的颜色
safe-area-inset-bottom  是否开启[底部安全区适配](https://www.uviewui.com/components/safeAreaInset.html#%E5%85%B3%E4%BA%8Euview%E6%9F%90%E4%BA%9B%E7%BB%84%E4%BB%B6safe-area-inset%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E)
mode  模式选择"mutil-column-auto"-多列联动模式
list  数组
label-name  list数据的label属性名(用于显示)
value-name  list数据的value属性名  (用于接口传参)
child-name  list数据的children属性名,只对多列联动模式有效
confirm  点击确定按钮,返回当前选择的值
*/
<view @click="()=> show=true">请选择</view>
<u-select v-model="show" :default-value="index" confirm-color="#343bad" safe-area-inset-bottom="true" mode="mutil-column-auto" :list="array" value-name="areaCode" label-name="areaName" child-name="subRegions" @cancel="cancel" @confirm="bindPickerChange"></u-select>

script
list的格式 如下

                  array=[{
                        areaCode: 1,
                        areaName: '中国',
                        subRegions: [
                            {
                                areaCode: 2,
                                areaName: '广东'
                            },
                            {
                                areaCode: 5,
                                areaName: '广西'
                            }
                        ]
                    },
                    {
                        areaCode: 8,
                        areaName: '美国',
                        subRegions: [
                            {
                                areaCode: 9,
                                areaName: '纽约'
                            }
                        ]
                    }
                ]
export default{
        name:'perfectData',
        data(){
            return{
                show:false,
                index: [0,0], //默认选中
                array: [], //数组
                provinceCode:'',//省
                cityCode:'' //市
            }
        },
        methods: {
            // 选择任务分类
            bindPickerChange: function(e) {
                console.log('select发送选择改变,携带值为', e)
                let value = e;
                for (let i =0;i<this.array.length;i++){
                    if(this.array[i].areaName==value[0]['label']){
                        this.index[0] = i
                        let item = this.array[i]
                        for(let j=0;j<item['subRegions'].length;j++){
                            if(item['subRegions']['areaName']==value[1]['label']){
                                this.index[1] = j
                            }
                        }
                    }
                }
                this.title = value[0]['label']+','+value[1]['label']
                this.provinceCode = value[0]['value']
                this.cityCode = value[1]['value']
            },
            cancel(){}
}
}
上一篇 下一篇

猜你喜欢

热点阅读