基于 Element 的城市级联选择器组件同步

妖狐艹你老母 2022-12-04 07:55 210阅读 0赞

城市数据 获取的是高德地图行政区域数据，需要申请自己的key，因是第三方api，存在跨域，使用了vue-jsonp,不存在跨域的话可以正常使用axios请求  
高德api地址：[https://lbs.amap.com/api/webservice/guide/api/district][https_lbs.amap.com_api_webservice_guide_api_district]

**1、安装vue-jsonp**

npm i vue-jsonp --save

**2、main 引入注册**

import VueJsonp from 'vue-jsonp'
    Vue.use(VueJsonp)

基本布局

数据

data() {
                return {
                    cityOptions: [
                    ],
                    /*选项列表格式*/
                    cityProps: {
                        value: 'name',
                        label: 'name',
                        children: 'districts'
                    }
                }
         }

执行方法

created() {
                this.$nextTick(() => {
                    this.getCity()
                })
            },

方法一

methods: {
                /* 获取省市区选项 */
                getCity () {
                    var data = {subdistrict:4,key:'883e4233efeb842f795329e2b6e5e988'};
                    var city = sessionStorage.getItem('city');
                    if(city === null) {
                        this.$jsonp('https://restapi.amap.com/v3/config/district',data) .then( res => {
                            var stringCity = JSON.stringify(res.districts[0].districts);
                            sessionStorage.setItem('city',stringCity);
                            this.cityOptions = this.getTreeData(res.districts[0].districts)
                        })
                    } else {
                        var setCity = sessionStorage.getItem('city');
                        var parseCity = JSON.parse(setCity);
                        this.cityOptions = this.getTreeData(parseCity)
                    }
                },
                getTreeData (data) {
                    // 循环遍历返回的数据
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].districts.length < 1) {
                            // districts若为空数组，则将districts设为undefined
                            data[i].districts = undefined
                        } else {
                            // districts若不为空数组，则继续 递归调用 本方法
                            this.getTreeData(data[i].districts)
                        }
                    }
                    return data
                },
                getCityValue(val) {
                    this.$emit('change', val);
                }
            }

方法二

methods: {
                //获取省市区选项
                getCity () {
                    var data = {subdistrict:4,key:'883e4233efeb842f795329e2b6e5e988'};
                    this.$jsonp('https://restapi.amap.com/v3/config/district',data) .then( res => {
                        this.cityOptions = this.getTreeData(res.districts[0].districts)
                    })
                },
                getTreeData (data) {
                    // 循环遍历返回的数据
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].districts.length < 1) {
                            // districts若为空数组，则将districts设为undefined
                            data[i].districts = undefined
                        } else {
                            // districts若不为空数组，则继续 递归调用 本方法
                            this.getTreeData(data[i].districts)
                        }
                    }
                    return data
                },
                getCityValue(val) {
                    this.$emit('change', val);
                }
            }

[https_lbs.amap.com_api_webservice_guide_api_district]: https://lbs.amap.com/api/webservice/guide/api/district