uni-app中无法用picker实现真·多选下拉框，因mode="multiSelector"仅为级联选择；应自封装弹层+checkbox-group控件，手动维护selectedValue与displayText，注意各端兼容性及性能优化。
uni-app 中用 picker 实现不了真·多选下拉框
uni-app 官方 picker 组件不支持多选，mode="multiSelector" 是级联选择（比如年-月-日），不是“勾选多个选项”。强行用它模拟多选，会破坏语义、无法自定义样式、在 H5 和小程序表现不一致，且无法搜索过滤。
真正能用的方案是：自己封装一个「点击触发弹层 + 列表勾选 + 回填标签」的组合控件。
- 核心思路：用
popup（或uni-popup）做弹层容器，checkbox-group+checkbox做选项，配合v-model或数组响应式管理选中状态 - 必须手动维护
selectedList（选中项数组）和displayText（回显文本，比如“已选3项”或具体标签） - H5 端注意
z-index层级，避免被input或其他 fixed 元素遮挡；小程序端慎用position: fixed，建议用uni.createSelectorQuery()动态计算弹层位置
uni-app 多选下拉组件的关键响应式逻辑怎么写
不能只靠 v-model 绑定 checkbox，因为需要同步更新显示文本、支持取消单个标签、支持全选/反选、还要防重复添加——这些都得手动控制。
推荐结构：options（原始选项数组）、selectedValue（绑定的 value 数组，如 ['a', 'b']）、selectedLabels（用于显示的 label 映射，避免渲染时反复 find）。
- 每次 checkbox 变更，用
options.filter(o => selectedValue.includes(o.value))同步生成selectedLabels，不要在模板里v-for里嵌套find - 点击已选标签关闭某一项时，直接
selectedValue = selectedValue.filter(v => v !== target)，别 push 再 splice - 全选逻辑要判断是否已全选：
selectedValue.length === options.length，而不是用布尔值开关来回切换 - 如果选项量大（>100 条），加
v-if控制弹层内列表渲染，避免首次打开卡顿
uni-app 小程序端多选下拉的兼容性坑
微信小程序基础库 2.25.0+ 才支持 checkbox-group 的 disabled 属性在子 checkbox 上生效；旧版本只能禁用整个 group，或者用 class + pointer-events 模拟禁用态。
另一个高频问题：popup 在 iOS 微信里可能被键盘顶起后错位，尤其当 input 聚焦又触发弹层时。解决方式不是监听 keyboardheight，而是改交互：把「点击输入框触发下拉」改为「点击右侧箭头图标触发」，彻底避开软键盘干扰。
- 安卓部分低端机上，
checkbox图标渲染模糊，建议用uni-icons自定义勾选状态图标，通过v-if切换checked/unchecked类名 - App 端（尤其是 iOS）弹层滚动卡顿，需给弹层容器加
style="overflow-y: auto; -webkit-overflow-scrolling: touch;" - H5 端若用
position: absolute定位弹层，父容器必须有position: relative，否则弹层会相对 viewport 定位，容易跑偏
uni-app 多选下拉组件要不要用 uni-app 插件市场组件
插件市场里搜 “多选下拉”，多数组件存在三个硬伤：不支持异步加载选项、不暴露 confirm 回调（只提供 change 事件）、内部用 scroll-view 导致 iOS 滚动粘滞。你很难改，但业务又常需要「加载中状态」或「确认按钮才提交选中结果」。
不如自己封装一个最小可用版本，核心代码不到 80 行，还能按需加功能：
<template>
<view class="multi-select">
<view @click="showPopup = true" class="trigger">{{ displayText }}</view>
<uni-popup :show="showPopup" @close="showPopup = false">
<view class="popup-content">
<checkbox-group @change="onCheckChange">
<label v-for="opt in options" :key="opt.value" class="option">
<checkbox :value="opt.value" :checked="selectedValue.includes(opt.value)" />
<text>{{ opt.label }}</text>
</label>
</checkbox-group>
</view>
</uni-popup>
</view>
</template>
重点不在代码长短，而在你能否快速响应产品需求变化——比如明天要加搜索框，或要求最多选 5 项，自己写的组件改两行就完事。
最常被忽略的一点：组件内不要用 this.$nextTick 去等弹层 DOM 渲染再 focus 搜索框，uni-app 的 popup 是 v-if 控制的，DOM 不存在时 focus 会静默失败。真要自动聚焦，得用 ref + setTimeout 延迟 100ms，且加 try/catch。
