上图是省市级联菜单的效果图，省市地区的数据文件开发者可以下载直接使用
首先要预先准备好一个vue框架的空项目。如果不知道vue脚手架的搭建，可以看我下一篇文章。其次，将我分享的省市地区的数据文件下载下来，放到项目的 src/assets目录下。接下来正式开始，第一步，在 src/compontents目录下， 创建下拉框组件Dropdown.vue文件，写好下拉框模板。实现级联菜单
难点1：三个下拉框之间的关联问题，这里涉及到监听事件！
难点2：根据数据的结构，如何将地区数据对应到正确的下拉框位置上。
需要注意事项：
当用户选择了省/直辖市的内容后，市/区的下拉框内容会被更新，县/市的下拉框是暂时不变的。当用户选择市/区的内容后，县/市的下拉框内容更新。当用户 修改省/直辖市的内容后，市/区和县/市的下拉框内容会被清空，并且显示默认的请选择**。当用户只修改市/区内容时，县/市 下拉框内容被清空，并修改成市/区对应的县/市。
// 这段内容放在 <template></template> 中<span>// 这里 v-model 用来绑定数据，可以接收到用户改变后的省直辖市，方便我们寻找该省直辖市对应的市区<select v-model="province" @change="changeCity">// locaty是地区数据，因为当前是子组件，locaty是接受父组件传地区数据！<option v-for="(val, index) in locaty.options" :key="index" :value="val.province">{{val.province}}</option></select><select v-model="c" @change="changeCounty"><option v-for="(name, index) in city" :key="index" :value="name.name">{{name.name}}</option></select><select v-model="cy"><option v-for="(area, index) in county" :key="index" :value="area">{{area}}</option></select></span>
Dropdown.vue的script代码，详细见代码注释：
<script>export default {name: 'Dropdown',props : ["locaty"], // 父组件中接受的地区数据data() {return {province : '选择省/直辖市' ,// 选择市区c : '选择市/区',city : [{name : '选择市/区' }],// 县市cy : '选择县/市',county : ['选择县/市']}},methods:{// 当省/直辖市选择出现变化的时候，要修改city和countychangeCity(){// 恢复默认状态this.c = '选择市/区'; this.cy = '选择县/市'; // 删除当前的city和county数组第一个数据之后的所有数据，否则会将上一次选择的内容和本次选择的内容拼接到一起！this.city.splice(1) this.county.splice(1);// 查找地区数据中是否包含用户当前选择的省直辖市对应的市区数据，并将数据保存到city数组中。for(var item in this.locaty.options){if(this.locaty.options[item].province == this.province){this.city = this.city.concat(this.locaty.options[item].city);}}},// 修改县/市changeCounty(){// 同上：恢复默认状态this.cy = '选择县/市';this.county.splice(1);// 查找用户当前选择的this.locaty.options.forEach(ele => {// 先确定当前的省份if(ele.province == this.province){ele.city.forEach((ele)=>{// 这里确定市区if(ele.name == this.c){// 将市区对应的县市地区数据拼接到county中；this.county = this.county.concat(ele.area);}})}});}}}</script>
到此，子组件的工作就已经完成，该父组件调用子组件Dropdown了，父组件src/pages/Uregister.vue文件。
<template><div>// 4. 使用下拉框组件 ， 用locaty接收地区数据city<Dropdown :locaty="city" ></Dropdown></div></template><script>// 1. 首先在父组件中引入地区数据import {city } from '../assets/data.js'// 2. 引入下拉框组件import Dropdown from '../components/Dropdown'export default {name: 'Uregister',components : {// 3. 注册下拉框组件Dropdown},}</script>
以上几步就完成了省市区三级级联菜单的功能，具体css样式就随意了，有更好的办法欢迎留言讨论。
