uniapp 省区市三级联动选择器

### 关于 UniApp 中实现省区市三级联动选择器 在 UniApp 开发框架中，可以利用 `picker` 组件或者自定义组件来实现省区市三级联动选择器的功能。以下是基于 Vue.js 的开发模式以及 Element UI 的设计理念，在 UniApp 中实现该功能的方法。 #### 方法一：使用内置的 `picker` 组件 UniApp 提供了一个原生的 `picker` 组件，可以通过设置其属性为多列形式来完成省区市的选择操作。以下是一个简单的示例： ```html <template> <view> <button @click="showPicker = true">选择地区</button> <picker mode="multiSelector" :range="areaList" range-key="label" :value="selectedIndex" @change="onChange"> <view>{{ selectedArea }}</view> </picker> </view> </template> <script> export default { data() { return { areaList: [ [{ label: '北京', value: '01' }, { label: '上海', value: '02' }], // 省份列表 [{ label: '北京市', value: '01' }, { label: '上海市', value: '02' }], // 城市列表 [{ label: '朝阳区', value: '01' }, { label: '黄浦区', value: '02' }] // 地区列表 ], selectedIndex: [0, 0, 0], selectedArea: '' }; }, methods: { onChange(e) { const index = e.detail.value; this.selectedIndex = index; this.selectedArea = `${this.areaList[0][index[0]].label} ${this.areaList[1][index[1]].label} ${this.areaList[2][index[2]].label}`; } } }; </script> ``` 上述代码展示了如何通过 `picker` 来构建一个多级联动的选择器[^1]。 --- #### 方法二：使用第三方库或自定义组件 如果需要更复杂的交互逻辑（如懒加载数据），可以选择引入外部 JSON 数据文件并动态渲染选项。下面展示了一种基于 JSON 文件的方式： ##### 步骤说明 1. 准备一份包含全国省市县的数据文件（JSON 格式）。可以从公开资源获取最新的行政区划数据。 2. 将这些数据存储到项目中的静态目录下，并通过异步请求读取它们。 3. 使用递归函数解析嵌套结构，生成适合显示的内容。 ##### 示例代码 假设已经有一个名为 `china-area.json` 的文件存放在 `/static/data/` 路径下，则可按如下方式编写页面逻辑： ```javascript // pages/AreaSelect/AreaSelect.vue <template> <view class="container"> <text>请选择您的地址：</text> <input type="text" v-model="selectedText" disabled /> <picker mode="multiSelector" :range="selectorRange" @columnchange="onColumnChange" @change="onConfirm"></picker> </view> </template> <script> import chinaData from '@/static/data/china-area.json'; export default { data() { return { selectorRange: [[], [], []], // 初始化三列范围 currentProvinceIndex: 0, currentCityIndex: 0, selectedText: '', // 显示最终结果 allAreas: [] }; }, onLoad() { this.allAreas = chinaData; // 加载全部区域数据 this.initProvinces(); // 设置初始省份列表 }, methods: { initProvinces() { let provinces = []; for (let item of this.allAreas) { provinces.push(item.label); } this.selectorRange[0] = provinces; // 更新第一列 }, onColumnChange(e) { const column = e.detail.column; if (column === 0) { this.currentProvinceIndex = e.detail.value; this.updateCities(); } else if (column === 1) { this.currentCityIndex = e.detail.value; this.updateDynamicDistricts(); } }, updateCities() { const provinceCode = this.allAreas[this.currentProvinceIndex].value; const cities = this.findChildrenByParentValue(provinceCode).map(city => city.label); this.selectorRange[1] = cities; // 更新第二列城市 this.updateDynamicDistricts(0); // 同时重置第三列 }, updateDynamicDistricts(index = 0) { const provinceCode = this.allAreas[this.currentProvinceIndex].value; const cityCode = this.findChildrenByParentValue(provinceCode)[this.currentCityIndex]?.value || ''; const districts = this.findChildrenByParentValue(cityCode)?.map(district => district.label) || ['暂无']; this.selectorRange[2] = districts; // 更新第三列区县 }, findChildrenByParentValue(parentValue) { return this.allAreas.flatMap(area => area.children?.filter(child => child.parent_value === parentValue) ); }, onConfirm(e) { const result = e.detail.value.map((val, idx) => this.selectorRange[idx][val]); this.selectedText = result.join(' '); } } }; </script> ``` 此方案适用于较大型应用需求场景下的灵活配置[^1]。 --- #### 性能优化建议 对于大规模数据集而言，一次性加载所有节点可能会增加内存消耗和初始化时间成本。因此推荐采用 **懒加载机制** ，即仅当用户点击某个父项之后再发起网络请求拉取子项详情。 ---