element 级联选择器省市区动态获取

炒沙作縻终不饱，缕冰文章费工巧。这篇文章主要讲述element 级联选择器省市区动态获取相关的知识，希望能为你提供帮助。
项目需要实现下图效果，并且可以支持选择到任意一级

文章图片

根据获取省市区码的接口拿到当前的省市区编码，再将编码传到获取该地区数据的接口，拿到返回值传回父组件。
【element 级联选择器省市区动态获取】1.通过lazy开启动态加载，通过lazyload来设置加载数据源的方法，对节点数据添加是否为叶子节点的标志leaf，如果后台数据没有该标志，可自己手动循环添加）
2.通过props.checkStrictly=true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
3.我的项目中获取省市区县接口有两个参数：第一个参数是type类型：省PROVINCE，市CITY，区县COUNTY，第二个参数为省市区编码，可针对自己项目接口实际情况进行调整。

< template> < div class="cascader"> < el-cascader :props="props" ref="cascader" clearable @change="handleChange" :options="dataList" v-model="cascaderData" > < /el-cascader> < /div> < /template> < script> export default props: [], data() return cityList: [], //市数据 countyList: [], //区县数据 dataList: [code: "", name: "", , ], props: checkStrictly: true, //开启可以只选择一级 value: "code", label: "name", lazy: true, // 此处必须为true lazyLoad: (node, resolve) => if (node.data.name) this.getChildData(node.data, resolve, node.level); , , provinceCode: "", cityCode: "", cascaderData: null, ; , created() this.getProvince(); , methods: getChildData(data, resolve, level) if (level == 1) //市 this.provinceCode = data.code; this.getCity(this.provinceCode, resolve); else if (level == 2) //区 this.cityCode = data.code; this.getCounty(this.cityCode, resolve); , handleChange(value) if (value.length > 0) this.$ajax .get(this.$urls.fastDistribute.getCityGeo + value[value.length-1]) .then((res) => if (res.data.code == 200) // 将当前选中节点数据和当前路径数组返回给父组件 this.$emit("getCascaderData", res.data.data); ); else this.$emit("getCascaderData", ""); , //获取省 getProvince() this.$ajax .get(this.$urls.getCityList,type: "PROVINCE" ) .then((res) => if (res.data.code == 200) this.dataList = res.data.data; ); , //获取市 getCity(code, resolve) this.$ajax .get(this.$urls.getCityList, type: "CITY", code: code, ) .then((res) => if (res.data.code == 200) this.cityList = res.data.data; resolve(this.cityList); ); , //获取区县 getCounty(code, resolve) this.$ajax .get(this.$urls.getCityList, type: "COUNTY", code: code, ) .then((res) => if (res.data.code == 200) let data = https://www.songbingjia.com/android/res.data.data; data.forEach((item) => item.leaf = true; //手动添加叶子节点 ); this.countyList = data; resolve(this.countyList); ); , , ; < /script>