uni-app怎么实现App端内的多级菜单联动选择 uni-app picker组件定制【技巧】-uni-app-PHP中文网

uni-app App端picker多级联动不能用mode="region"，因其仅支持固定省市区三级且不支持自定义字段；必须手写picker配合column-change事件控制列间依赖，注意value为索引数组、动态更新数据源并兼容iOS强制刷新。

uni-app怎么实现app端内的多级菜单联动选择 uni-app picker组件定制【技巧】

uni-app App端picker多级联动为什么不能直接用`mode="region"`

因为mode="region"只支持省市区三级，且数据源固定、不可替换，App端还可能因原生层限制导致自定义字段（如“部门/岗位/职级”）完全不生效。真要多级联动，必须放弃内置mode，手写picker + column-change事件控制逻辑。

常见错误现象：bindcolumnchange在iOS App里不触发、Android上滑动后value没更新、选中项回显错乱——根本原因是没手动同步picker的value数组和各列数据源长度。

每列数据必须是扁平数组（不能嵌套对象），picker只认Array
value是数字索引数组，比如[0, 2, 1]，不是ID或code值
每次某列变化，都要重置它右边所有列的value索引为0，并清空对应列的数据源

如何用`picker` + `column-change`实现三级联动（以省-市-区为例）

核心不是“渲染”，而是“列间依赖控制”：第二列数据由第一列选中项决定，第三列由第二列决定。不能等用户点确定才查，必须在滑动过程中实时响应。

使用场景：选择组织架构（公司→部门→小组）、商品类目（一级类目→二级→三级）、服务区域（大区→城市→网点）。

把三列数据分别存为provinces、cities、areas三个响应式数组
value初始设为[0, 0, 0]，但cities和areas初始为空数组
监听@columnchange，通过detail.column判断哪一列动了；若column === 0，就根据value[0]查对应cities，然后value = [value[0], 0, 0]并重置cities/areas
iOS App端务必在setTimeout里调用this.$forceUpdate()，否则视图不刷新

onColumnChange(e) {
  const { column, value } = e.detail;
  if (column === 0) {
    this.cities = this.provinces[value].children || [];
    this.areas = [];
    this.value = [value, 0, 0];
  } else if (column === 1) {
    this.areas = this.cities[value].children || [];
    this.value = [this.value[0], value, 0];
  }
  // iOS需强制刷新
  setTimeout(() => this.$forceUpdate(), 10);
}