使用本地的json数据实现省市县三级联动效果

最近做项目，需要实现一个省市县三级联动的效果示意图，因为是使用自己公司内部研发的移动组件，但是这个组件研发的例子并没有给出。

<mf1-popup v-model="showAddr" position="bottom" class="mf1-popup">
       <div class="page-picker-wrapper">
             <mf1-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="10" :show-toolbar="true" ref="addrPicker">
                     <div class="div_picker_header">
                        <div @tap="showAddr = false" class="div_cancel div_picker_button">取消</div>
                        <div @tap="selectAddr" class="div_ok div_picker_button">确定</div>
                    </div>
             </mf1-picker>
       </div>
</mf1-popup>

 如果是使用 mint-ui的组件的同学，可以仿照上面的写法（其实是类似的）

 

<script>
    const cityData  =  require("../../../../static/constants/city.json")
    export default{
        data(){
            return{
                addressSlots: [
                {
                    flex: 1,
                    values: Object.keys(cityData),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot5',
                    textAlign: 'center'
                }
            ],
            myAddressProvince: "",
            myAddressCity:"",
            myAddresscounty: ""
            }
        },
        methods:{
            onAddressChange(picker, values) {
            if(cityData[values[0]]){ 
　　　　　　　　picker.setSlotValues(1,Object.keys(cityData[values[0]])); // Object.keys()会返回一个数组，当前省的数组
　　　　　　　　picker.setSlotValues(2,cityData[values[0]][values[1]]); // 区/县数据就是一个数组
　　　　　　　　this.myAddressProvince = values[0];
　　　　　　　　this.myAddressCity = values[1];
　　　　　　　　this.myAddresscounty = values[2];
　　　　　　}
        }
        }
    }
</script>

ps: cityData.json文件的下载地址：https://github.com/artiely/Administrative-divisions-of-China