不能用picker原生mode="region"或"multiSelector"做商品分类三级联动，因其不支持自定义样式、无法嵌套对象数据、列间无依赖机制导致联动逻辑脆弱；应改用picker-view手动维护三列value与range，通过预构建Map索引、防抖、全量setData及显式height设置保障性能与一致性。
别用 picker 原生 mode="region" 或 mode="multiSelector" 做商品分类三级联动——它不支持自定义样式、无法嵌套对象数据、联动逻辑一碰就崩。
为什么 picker 的 multiSelector 模式不能直接用于商品分类
商品分类通常带 ID、code、层级关系、是否禁用等字段，而 multiSelector 的 range 只接受纯字符串数组，range-key="name" 仅能取显示文本，无法携带元数据；更关键的是，它的列之间无依赖机制：你改了第一列，第二列不会自动刷新，bindchange 里手动 setData 更新 range 后，value 索引常越界或不同步，iOS 上滚动卡顿、选中错位是常态。
- 错误现象：
detail.value是[1, 0, 2]，但第二列 UI 还停在索引 0，因为没同步重置value[1]和value[2] - 数据结构硬伤：商品分类常为树形对象（含
id、parentId、isLeaf），没法直接 flatten 成三层数组而不丢失上下文 - 样式完全不可控：
picker内部滚动条、字体、间距、高亮色全由平台决定，H5 和小程序渲染差异大，根本做不到“自定义风格”
真正可控的方案：用 picker-view + 手动维护三组 value 和 range
picker-view 是唯一能精细控制每列渲染、滚动、联动时机的原生组件。它不绑定数据结构，只管“当前显示什么、当前选中哪个索引”，把联动逻辑完全交给你写——这反而是商品分类需要的灵活性。
- 每列
range必须是纯字符串数组，提前从原始分类树中提取：provinces = categoryTree.map(c => c.name)，不要塞对象 - 用
data-column="0"标识列序号，在@change回调里通过e.target.dataset.column判断哪列变了 - 第一列变更后，立刻查出对应子类数组（如
cities = findChildrenById(provinceId)），赋给第二列range，并重置value[1] = 0、value[2] = 0 - 第二列变更同理：查第三级列表，重置
value[2] = 0；防抖必须加，否则快速滑动时连续触发 setData 导致 iOS 渲染阻塞 - 所有
value数组要响应式声明（ref([0,0,0])或reactive({ value: [0,0,0] })），且每次更新必须一次性setData全量数组，不能只改某一项
自定义样式靠外层包裹 + CSS 覆盖，不是改 picker-view 内部
picker-view 本身不支持 class 绑定或 slot，但你可以用 view 包裹它，再用 CSS 控制宽度、高度、边框、字体大小；关键技巧是利用 indicator-style 属性定制分隔线和滚动指示器：
-
indicator-style="height: 40px; line-height: 40px; color: #333; font-size: 14px;"—— 直接控制指示器区域样式 - 外层
view设display: flex并给三列picker-view分配等宽（如width: 33.3%），避免默认撑满 - 每列内部用
picker-view-column+v-for渲染，每个view加class，就能单独控制选项颜色、背景、hover 效果（注意：H5 下 hover 无效，需用active-class） - 禁用状态靠数据驱动：
v-if="item.disabled"或透明度控制，不要依赖picker-view自身逻辑
联动时必须处理“叶子节点无下级”的边界情况
商品分类里常见二级类目就是末级（如“iPhone 15”下面没有三级），这时第三列 range 应为空数组或占位符，且 value[2] 必须设为 0 并锁定不可操作——否则用户滑动第三列会触发无效计算，甚至 crash。
- 判断逻辑写在列变更回调里：
if (nextLevelList.length === 0) { this.thirdRange = ['（无子类）']; this.value[2] = 0; } - UI 层加提示：
v-if="thirdRange.length === 1 && thirdRange[0].includes('无子类')"显示灰色文字 - 提交时校验：
selectedId必须取自最后一列有效项，不能默认取value[2]对应索引——因为可能为占位符 - 性能点：分类数据超 500 条时，
findChildrenById必须用 Map 预构建索引，避免每次遍历整棵树
最易被忽略的是：三列 picker-view 的 height 必须显式设置（如 240px），且三列一致；否则在某些安卓机型上会出现滚动错位、指示器偏移。这不是 bug，是 picker-view 渲染机制决定的——它不自动适应内容高度。
