目录
必要准备
1. 查询行政区划的接口
2. 在 vue.config.js 中配置接口代理
范例1 —— 级联选择行政区划（可以选择任意一级）
范例2 —— 限制行政区划的显示和选择范围
范例3 —— 获取选中行政区划的名称
必要准备
1. 查询行政区划的接口
可以使用高德提供的API https://developer.amap.com/api/webservice/guide/api/district/
获取高德开发的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>
2. 调用 getCheckedNodes 方法获取选中的节点数组（注意：是个数组）
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)
}
