uni-data-cascade 样式难改因封装封闭、scoped 限制，推荐用 scroll-view 自建级联；需扁平数据结构、id 合法、缓存路径、动态生成各列数据并校验完整性。
uni-app 中用 uni-data-cascade 为什么样式改不动？
因为 uni-data-cascade 是封装好的组件，默认样式封闭、class 不透传，直接加 class 或覆盖 .uni-cascade__item 在 H5 可能生效，但在小程序（尤其是微信）里几乎无效——它用的是 scoped 样式 + 动态 slot 渲染，自定义入口其实不在它身上。
真正可控的方式是放弃该组件，自己用 uni-data-picker 或纯 view + scroll-view 搭建级联逻辑。推荐后者：轻量、100% 可控、无兼容包袱。
- 层级数据结构必须是扁平数组 +
pid/id/label/value字段，别用嵌套对象（否则搜索和联动会绕弯） - 用
ref控制每列scroll-view的滚动位置，避免“滑动一列、其他列不同步” - 微信小程序中禁止在
scroll-view内使用v-for+ 大量view，建议单列最多渲染 50 条，超出用virtual-list思路做可视区裁剪
怎么让三列级联支持实时关键字搜索？
搜索不能只搜“叶子节点”，得支持从任意层级输入后，自动展开匹配路径并高亮。例如搜“浦东”，要能定位到“上海市 > 浦东新区 > 张江镇”。关键在预处理数据 + 路径回溯。
实操分三步：
- 构建带完整路径的扁平索引：
const indexedList = list.map(item => ({ ...item, path: getFullPath(item.id) }))，其中getFullPath递归查父级拼接 label - 搜索时用
indexedList.filter(i => i.path.includes(keyword) || i.label.includes(keyword))，拿到结果后用new Set()提取所有涉及的id和pid - 用这些 id 重建三级激活状态：
activeIds = [rootId, childId, leafId]，再触发各列scroll-to到对应项
注意：getFullPath 必须缓存，否则每次搜索都递归查表，列表超 200 条时卡顿明显。
微信小程序里 scroll-view 滚动对齐不准怎么办？
常见现象：点击“北京市”，第二列没滚到“朝阳区”，而是停在中间——因为 scroll-into-view 依赖元素 id，但动态生成的 item 没设 id，或 id 值含空格/特殊字符导致匹配失败。
- 每个选项必须带唯一、合法 id：
:id="'item-' + item.value"（不能是item.label） - 滚动前确保目标元素已渲染：
this.$nextTick(() => this.$refs.col2.scrollTo({ scrollTop: pos })) - 手动计算偏移更稳：
const query = uni.createSelectorQuery().in(this); query.select(`#item-${val}`).boundingClientRect();，再用scrollTop设置 - 安卓真机上
scroll-top设为小数（如123.5）会导致跳动，统一取整
搜索结果少于三级时如何保持列数一致？
比如搜“义乌”，只匹配到“浙江省 > 金华市 > 义乌市”，那第一列就只有“浙江省”，第二列只有“金华市”——但 UI 上仍要显示三列，否则布局塌陷、用户困惑。
- 每列数据源不直接等于原始 list，而是基于当前激活路径动态生成：
col1Data = roots; col2Data = childrenOf(activeId1); col3Data = childrenOf(activeId2) - 如果某列无子项（如
col2Data.length === 0），则置空数组，并在模板中用v-if="col2Data.length" else显示“无匹配”提示，而非隐藏整列 - 禁止把“无子项”的列设为
display: none，否则scroll-view高度计算异常，滚动错位
最易被忽略的是搜索后未重置“已选值”——用户搜完点确定，结果提交的还是上次手动选的旧值。务必在搜索触发时清空 selectedValue，并在点击确定前校验路径是否完整（三级都存在才允许提交）。
