elementui cascader+高德api省市区多级联动

一 创建工具方法

如果你像我一样在很多页面都要用这个联动，就抽出来做成工具

在utils中创建province.js代码如下：

export default{
  data () {
    return {
      /* 高德地图api */
      url: 'https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=<你的key>',
      /* 选项列表 */
      cityOptions: [],
      /* 选项列表格式 */
      cityProps: {
        value: 'name',
        label: 'name',
        children: 'districts'
      }
    }
  },
  methods: {
    /* 获取省市区选项 */
    getCity () {
      axios.get(this.url).then(res => {
        this.cityOptions = this.getTreeData(res.data.districts[0].districts)
      })
    },
    /* 递归处理末尾项district为0的空项 */
    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
    },
  }
}

完事后在main.js中引入这个工具，丢到mixin中

import province from '@/utils/province'

Vue.mixin(province)

二 elementui-cascader

// elementui
<el-cascader size="large"
             ref="addPoint"
             placeholder="请选择"
             :props="cityProps"
             :options="cityOptions"
             clearable
             v-model="selectedOptions"
             @change="changeCity">
</el-cascader>

// js
调用utils中的province.js
created(){
   // 这个getCity是定义在main.js的mixin中
    this.getCity()
},
changeCity(){
  console.log(this.selectedOptions)
  // ['浙江省','湖州市','长兴县']，向上海、北京这些都是三级下钻
},

三 注意问题

默认的cascader高度需要调整下，不然就是这样的

在global.css中给他一个高度

.el-cascader-menu {
    height: 300px;
}

最终效果