位置: IT常识 - 正文
Vue------实现省市区三级联动(vue定位城市)
编辑：rootadminVue------实现省市区三级联动 
本文链接地址:https://www.jiuchutong.com/zhishi/290881.html
转载请保留说明！
推荐整理分享Vue------实现省市区三级联动(vue定位城市)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue 省市区,vue实现省市区三级联动数据格式,实现vuex,vue实现省市联动,vue实现省市二级联动,vue实现省市区三级联动数据格式,vue实现省市区三级联动数据格式,vue实现省市区三级联动逻辑,内容如对您有帮助，希望把文章链接给更多的朋友！
本篇将用，vue框架实现省市区三级联动
一、思路三个下拉框，分别代表省、市、区
下面的任务就是，分别绑定 省、市、区三个下拉框：
点击省会出现所有的省份
点击对应的省份，市下拉框会对应出现对应的市
点击市会出现所有的市
点击对应的市，区下拉框会对应出现对应的区。
依次可以实现 省市区三级联动。
二、vue主体实现如下面代码所示
<body><div id="app"> <div> <span>省</span> <select v-model="pro"> <option :value="p.adcode" v-for="p in list">{{p.name}}</option> </select> <span>市</span> <select v-model="city"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts"> {{item.name}} </option> </select> <span>区</span> <select v-model="county"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts"> {{item.name}} </option> </select> </div></div><script> new Vue({ el: "#app", data: { pro: "110000", city: "", county: "", list: citys }, })</script></body>三、完善代码（联动）要想实现省市区三级联动
对 省、市进行监控，对应的数据改变，就改变对应的省市县，以此来完成省市县三级联动
完善后的 Vue 如下
new Vue({ el: "#app", data: { pro: "110000", city: "", county: "", list: citys }, methods: { loadCity(proCode) { let $citys = this.list.find(s => s.adcode == proCode).districts[0]; if ($citys != null) { this.city = $citys.adcode; } }, loadCounty(proCode, cityCode) { let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0]; if ($county != null) { this.county = $county.adcode; } } }, created() { this.loadCity(this.pro); this.loadCounty(this.pro, this.city); }, watch: { pro: function (newVal, oldVal) { this.loadCity(newVal); }, city: function (newVal, oldVal) { this.loadCounty(this.pro, this.city); } }, })四、全部代码html部分
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <script src="../js/citys.js"></script> <script> console.log(citys) </script> <style> select{ width: 188px; height: 20px; text-align: center; border-radius: 20px; } </style></head><body><div id="app"> <div> <span>省</span> <select v-model="pro"> <option :value="p.adcode" v-for="p in list">{{p.name}}</option> </select> <span>市</span> <select v-model="city"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts"> {{item.name}} </option> </select> <span>区</span> <select v-model="county"> <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts"> {{item.name}} </option> </select> </div></div><script> new Vue({ el: "#app", data: { pro: "110000", city: "", county: "", list: citys }, methods: { loadCity(proCode) { let $citys = this.list.find(s => s.adcode == proCode).districts[0]; if ($citys != null) { this.city = $citys.adcode; } }, loadCounty(proCode, cityCode) { let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0]; if ($county != null) { this.county = $county.adcode; } } }, created() { this.loadCity(this.pro); this.loadCounty(this.pro, this.city); }, watch: { pro: function (newVal, oldVal) { this.loadCity(newVal); }, city: function (newVal, oldVal) { this.loadCounty(this.pro, this.city); } }, })</script></body></html>js部分 ( 私聊作者获取 )
下一篇：塔拉纳基山，新西兰艾格蒙特国家公园 (© Francesco Vaninetti/plainpicture)(塔拉基之死)
