uni-app三级联动picker选不了市和区，因range需二维数组而数据是树形结构；须扁平化为三个动态过滤数组，用change事件手动更新value并nextTick刷新。
uni-app里用picker做三级联动为什么选不了市和区？
因为picker的range必须是二维数组，而省市区三级数据天然是树形结构。直接把嵌套对象塞进range，picker会静默失败——不报错，但滚动无效、change事件不触发。
- 正确做法：把原始的树形数据（比如
provinceList）提前扁平化为三个独立数组：provinces、cities、areas，再用range-key配合range控制每一级显示 - 关键约束：
cities和areas必须按“当前选中的省/市”动态过滤，不能一次性全量加载——否则picker会卡顿甚至崩溃（尤其安卓低端机） - 别用
v-model绑定picker的value，它只接受数字索引数组，比如[0, 2, 5]，不是["广东", "深圳", "南山区"]
怎么让picker三级联动响应用户选择？
靠监听change事件 + 手动更新下一级range，不能依赖双向绑定自动同步。
- 第一级（省）变化后，立刻根据
event.detail.value索引查出对应省份的cityList，重置cities数组和第二级value[1]为0 - 第二级（市）变化后，同理过滤出该市的
areaList，并重置第三级value[2] - 每次重置
value都要用this.$nextTick包裹，否则picker视图不刷新（尤其是H5平台） - 示例关键片段：
onChange(e) { const col = e.detail.column const val = e.detail.value if (col === 0) { this.cities = this.provinceList[val].cities || [] this.areas = [] this.value = [val, 0, 0] } else if (col === 1) { this.areas = this.cities[val].areas || [] this.value = [this.value[0], val, 0] } }
为什么真机调试时iOS正常、安卓点不动或闪退？
安卓原生picker组件对range数组长度极度敏感。单个range超过300项（比如某省有400个区），很多安卓机型会直接拒绝渲染或卡死。
- 解决方案：对
areas做截断，比如只取前200个，加“更多…”占位项；点击后再用showActionSheet补全（需额外逻辑） - 别在
mounted里一次性请求全部省市区JSON——uni-app的onLoad阶段还没准备好picker上下文，容易导致range为空白 - 兼容性底线：H5用
picker没问题；微信小程序要加mode="region"且放弃自定义样式；App端建议优先用uni-data-picker组件（官方封装，处理了原生差异）
用uni-data-picker替代原生picker要注意什么？
它本质是Webview内渲染的模拟组件，不走原生控件，所以能绕过安卓range长度限制，但代价是失去系统级体验和部分API支持。
- 必须传
localdata属性，格式是扁平化的三级数组：[[{text:"北京",value:"11"},...],[{text:"朝阳区",value:"110105"},...],[]]，不能传树形 -
field配置要明确指定text和value字段名，否则默认找label/value，和你数据字段对不上就全空 - 它不触发
change事件，而是用@change监听，返回的是{ detail: { value: ["11", "110105", "11010501"], text: ["北京", "朝阳区", "建外街道"] } }，注意字段名和类型 - 如果项目已用
picker写了一半，切过去要改三处：模板标签、数据结构、事件回调参数解析逻辑
真正麻烦的不是怎么实现，而是不同平台对“联动”的定义不一致——iOS认为三级必须同时滚动，安卓认为点开二级才加载三级，而uni-data-picker又走纯JS渲染。选哪个方案，得先看你的发布目标和用户设备分布。
