vue3 多级联动选择

### Vue3 实现多级联动选择 #### 组件模板结构 为了构建一个多级联动的选择器，组件的模板应当包含多个`<select>`标签来表示各级别的下拉菜单。对于三级联动而言，则需准备三个这样的元素用于展示省、市、区/县的信息。 ```html <div> <label>省份:</label> <select v-model="selectedProvince" @change="onProvinceChange"> <option v-for="(province, index) in provinces" :key="index" :value="province.value">{{ province.label }}</option> </select> <label>城市:</label> <select v-model="selectedCity" @change="onCityChange"> <option v-for="(city, index) in cities" :key="index" :value="city.value">{{ city.label }}</option> </select> <label>地区:</label> <select v-model="selectedArea"> <option v-for="(area, index) in areas" :key="index" :value="area.value">{{ area.label }}</option> </select> </div> ``` #### 响应式数据定义 采用Vue 3提供的组合API风格编写逻辑，在<script setup>语法糖的支持下可以更加简洁地管理状态。这里利用了`ref()`函数初始化四个变量——分别代表当前选中的省级单位(`selectedProvince`)及其对应的市级列表(`cities`)、已选定的城市项(`selectedCity`)以及最终细化到的具体区域选项(`areas`)和其值(`selectedArea`)。 ```javascript import { ref } from 'vue'; const selectedProvince = ref(''); const selectedCity = ref(''); const selectedArea = ref(''); // 初始化省市县的数据源 const provinces = ref([ { value: 'zhejiang', label: '浙江省', children: [ { value: 'hangzhou', label: '杭州市', children: [{ value: 'xihu', label: '西湖区' }] } ] }, // 更多省份... ]); let cities = ref([]); let areas = ref([]); function onProvinceChange() { const currentProvinceChildren = provinces.value.find( (item) => item.value === selectedProvince.value)?.children; if (currentProvinceChildren && Array.isArray(currentProvinceChildren)) { cities.value = currentProvinceChildren; selectedCity.value = ''; selectedArea.value = ''; areas.value = []; } } function onCityChange() { const currentCityChildren = cities.value.find( (item) => item.value === selectedCity.value)?.children; if (currentCityChildren && Array.isArray(currentCityChildren)) { areas.value = currentCityChildren; selectedArea.value = ''; } } ``` 上述代码片段展示了如何基于用户交互动态调整子集联动物品的内容[^1]。 #### 数据获取方式 如果项目允许的话，可以直接将预先整理好的JSON格式地理信息嵌入前端代码之中；当然也可以考虑通过网络请求的方式从服务器端加载最新最全的位置资料。后者通常更适合于那些地理位置频繁变动的应用场景或者是希望减少初始页面体积的情形之下[^3]。 #### 类型定义 考虑到TypeScript的优势在于能够提供编译期错误检测并增强IDE支持等功能特性，因此推荐为所有的输入输出参数加上相应的类型声明： ```typescript interface OptionItem { value: string; label: string; children?: OptionItem[]; } type OptionsList = OptionItem[]; const provinces = ref<OptionsList>([ /* ... */ ]); ``` 这样不仅有助于提高开发效率还能有效降低潜在的风险点。