必要准备
1. 查询行政区划的接口
可以使用提供的API 行政区域查询-API文档-开发指南-Web服务 API | 地图API
获取高德开发的key 的方法，详见博客 地图开发 —— 获取地图开发的 key_朝阳39的博客-CSDN博客_地图开发平台的key
2. 在 vue.config.js 中配置接口代理
// 访问高德地图的API '/gaodeMapAPI': { target: 'https://restapi.amap.com', changOrigin: true, ws: true, // 是否启用websockets secure: true, pathRewrite: { '^/gaodeMapAPI': '' } },
范例1 —— 级联选择行政区划（可以选择任意一级）
要点
1. 使用懒加载 lazy: true
2. lazyLoad 函数中无法直接获取到this，所有需在 data(){} 函数中，使用 let that = this
3. 最终选中的结果为一个数组，内容依次是省、市、区的行政区划代码
4. 通过在 props 中添加 checkStrictly: true 实现级联单选，从而可以选择任意一级
5. 从接口中获取到的结果，需要转换成级联选择器需要的数据格式，值存入value，可见的内容存入 label，当 leaf 赋值为true 时，得到最后一级。
（ 范例中的接口必须指定 leaf 为true 的条件 item.level === "district" ，否则可以无限级联选择 ）
（ 另外，因范例中的接口返回的街道数据的行政区划代码是其上级的区/县的行政区划代码，所以不支持级联选择到街道）
<template> <div style="padding: 20px"> <p>当前选中的行政区划编码为： {{regionCodeList}}</p> <el-cascader v-model="regionCodeList" :props="props"></el-cascader> </div> </template> <script> export default { data() { let that = this return { regionCodeList: [], props: { // 单选 checkStrictly: true, // 懒加载 lazy: true, lazyLoad(node, resolve) { that.$http.get("/gaodeMapAPI/v3/config/district", { params: { keywords: node.value, subdistrict: '1', key: 'f7c1ee410753e832aad78bc5cf135351' } }) .then(res => { let nodes = res.data.districts[0].districts.map(item => { return { value: item.adcode, label: item.name, leaf: item.level === "district" } }) resolve(nodes) }) } } } }, } </script> <style scoped> </style>
范例2 —— 限制行政区划的显示和选择范围
需求
1. 默认选中深圳市
2. 不能选择省，但可以选择深圳市，或者深圳市内的区
3. 不显示广东省和深圳市之外的省和市
要点
1. v-model 绑定默认值，便能实现默认选中
2. 在添加 node 时，添加 disabled: true 便可使该节点不可选
3. 在添加 node 时，通过if 判断，过滤掉不显示的省和市
<template> <div style="padding: 20px"> <p>当前选中的行政区划编码为： {{regionCodeList}}</p> <el-cascader v-model="regionCodeList" :props="props"></el-cascader> </div> </template> <script> export default { data() { let that = this return { regionCodeList: ["440000", "440300"], props: { // 单选 checkStrictly: true, // 懒加载 lazy: true, lazyLoad(node, resolve) { that.$http.get("/gaodeMapAPI/v3/config/district", { params: { keywords: node.value, subdistrict: '1', key: 'f7c1ee410753e832aad78bc5cf135351' } }) .then(res => { let districtsList = res.data.districts[0].districts let nodes = [] districtsList.forEach(item => { if ((item.level === "province") && (item.adcode === "440000")) { nodes.push( { value: item.adcode, label: item.name, disabled: true } ) } else if ((item.level === "city") && (item.adcode === "440300")) { nodes.push( { value: item.adcode, label: item.name, } ) } else if (item.level === "district") { nodes.push( { value: item.adcode, label: item.name, leaf: item.level === "district" } ) } }) resolve(nodes) }) } } } }, } </script> <style scoped> </style>
范例3 —— 获取选中行政区划的名称
要点
1. 绑定 change 事件，触发获取行政区划信息的代码
<el-cascader ref="chooseRegionDom" @change="getRegionInfo" v-model="regionCodeList" :props="props"></el-cascader>
3. 解析选中的节点（节点数组中下标为 0 的节点为选中的节点）
getRegionInfo(){ // 获取选中的nodeList let nodeList = this.$refs.chooseRegionDom.getCheckedNodes() // 解析node的label 和 value this.$set(this.regionInfo,'regionName',nodeList[0].label) this.$set(this.regionInfo,'regionCode',nodeList[0].value) }
