网站建设人员组织,做网站能用微软,优书网推荐,西安到北京火车票多少钱省市县选择如果自己实现是比较麻烦的#xff0c;最近发现可以使用高德实现省市县联动选择#xff0c;实现后来记录一下供大家参考。 文章目录 最终效果#xff1a;一、准备工作二、完整页面代码 最终效果#xff1a;
实现单次点击获取省市县名称#xff0c;选择完成后返回…省市县选择如果自己实现是比较麻烦的最近发现可以使用高德实现省市县联动选择实现后来记录一下供大家参考。 文章目录 最终效果一、准备工作二、完整页面代码 最终效果
实现单次点击获取省市县名称选择完成后返回获取省市县数组
一、准备工作
高德API平台申请自己的key申请的类型为Web服务
二、完整页面代码
主要实现在于 通过发送高德api请求 https://restapi.amap.com/v3/config/district?keywordssubdistrict3extensionsbasekey你的key 获取到所有的省市县数据 通过代码处理后放到Element UI的级联选择组件中
templatediv!-- 引入Element UI Cascader组件 --el-cascaderfilterableplaceholder请选择refaddPoint:propscityProps:optionscityOptionsclearableactive-item-changehandleActiveItemChangechangehandleChangev-modelselectedOptions/el-cascader/div
/templatescriptimport axios from axios;export default {data() {return {selectedArea: [],provinceList: [],CITY: [],XIAN: [],/*获取数据的url key需要自己到高德地图申请*/url: https://restapi.amap.com/v3/config/district?keywordssubdistrict3extensionsbasekey自己的key,/*选项列表*/cityOptions: [],/*选项列表格式*/cityProps: {value: name,label: name,children: districts,},selectedOptions: null, //选中的数据};},methods: {/* 获取省市区选项 */getCity() {axios.get(this.url, null).then((res) {console.log(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设为undefineddata[i].districts undefined} else {// districts若不为空数组则继续 递归调用 本方法this.getTreeData(data[i].districts)}}return data},handleActiveItemChange(seleted){console.log(seleted,handleActiveItemChange-----)},handleChange(seleted){console.log(seleted,handleChange-----)}},created() {this.getCity();},};
/script
