VUE（快速实现一个省市区的级联选择器） web前端之VUE

简介项目中，大概率会有选择地址的需求，但是在没有组件可用的情况下，就需要自己实现一个，接下来就以VUE项目为基础进行实操。
具体实现第一步：准备一个全国地址的json文件（上级包含下级的从属关系数据，符合element-ui的select选择器数据要求）。
这里有下载链接
第二步：全局引入element-ui框架。
第三步：页面中引入json文件。
第四步：写好html与JS方法

> import json from "@/assets/json/place.json"; export default { data() { return { provinces: json, // 省数据（一个省中包含市的信息，一个市中包含区的信息） cityList: [], // 某省下市的列表数据 areaList: [], // 某市下区的列表数据 formData: {} }; }, methods: { // 操作：选择省，把省下的市的数据筛出来 provinceChange(event) { let chooseProvince = this.provinces.find(it => { if (it.value =https://www.it610.com/article/== event) { return it; } }); this.$set(this.formData,"province", chooseProvince.label); this.cityList = chooseProvince.children; this.$set(this.formData, "cityCode", ""); this.$set(this.formData, "city", ""); this.$set(this.formData, "areaCode", ""); this.$set(this.formData, "area", ""); }, // 操作：选择市，把市下的区的数据筛出来 cityChange(event) { let chooseCity = this.cityList.find(it => { if (it.value =https://www.it610.com/article/== event) { return it; } }); this.$set(this.formData,"city", chooseCity.label); this.areaList = chooseCity.children; this.$set(this.formData, "areaCode", ""); this.$set(this.formData, "area", ""); }, // 操作：选择区 areaChange(event) { let chooseArea = this.areaList.find(it => { if (it.value =https://www.it610.com/article/== event) { return it; } }); this.$set(this.formData,"area", chooseArea.label); console.log(this.formData); } } }; >

最后 【VUE（快速实现一个省市区的级联选择器）】觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！