10、Mint UI Picker省市区联动效果

GIF.gif

html结构

<template>
    <div class="header">
       <mt-picker :slots="datalist" @change="onValuesChange"></mt-picker>
    </div>
</template>

js逻辑
slots数据不能放在data函数里，得放在计算属性里，初始化数据需要放在created钩子函数中，改变slot的值，在change对应的方法里通过setSlotValues()方法设定给定slot的备选数组；

<script>
import allCity from '@/assets/js/city' //省市区联动数据
let pickerObj = {
    prov:{},
    city:{},
    area:{}
}
    export default {
       computed:{
            datalist(){
                let slots = [
                    {
                    flex: 1,
                    values: Object.keys(pickerObj.prov),
                    className: 'slot1',
                    textAlign: 'right'
                    }, 
                    {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                    }, 
                    {
                    flex: 1,
                    values:Object.keys(pickerObj.city),
                    className: 'slot3',
                    textAlign: 'center'
                    },
                     {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                    }, 
                    {
                    flex: 1,
                    values:Object.keys(pickerObj.area),
                    className: 'slot5',
                    textAlign: 'left'
                    }
                ]
                return slots;
            }           
        },
        created(){
            let _this = this;           
            allCity.forEach(function(val,index){    
                    pickerObj.prov[val.label] = val.label;
            });
            allCity[0].children.forEach(function(item,id){
                pickerObj.city[item.label] = item.label;
            })
            allCity[0].children[0].children.forEach(function(item,id){
                pickerObj.area[item.label] = item.label;
            });
        },
        methods: {
            onValuesChange(picker, values) {
                let _this = this;
                allCity.forEach(function(val,index){
                    //values[0]是第一个省当前选择的值
                    if(val.label == values[0]){ 
                        //当前省对应的城市
                        let icity = val.children.map(function(item,index){
                            return item.label
                        })
                        picker.setSlotValues(1,icity);  //设定给定slot备选数组的值
                        
                        //当前城市对应的区
                        allCity[index].children.forEach(function(item,id){    
                            if(item.label == values[1]){
                                let iregion = item.children.map(function(ele,index){
                                    return ele.label
                                });
                                picker.setSlotValues(2,iregion); //设定给定slot备选数组的值
                                                               
                            } 
                        });
                    }
                });
            }
        }
  };
</script>

aaa.png

省市区联动JSON格式的数据连接
https://blog.csdn.net/weixin_41652865/article/details/81982838