checkbox-group需手动实现选中状态、数量限制和列表过滤；@change只返回value数组，v-model仅支持string/number数组；placement失效时用flex布局替代；限制最多选2项需在@change中截取并动态过滤显示列表。
直接用 checkbox-group + 多个 checkbox 就能实现复选框组，但要注意：它本身不带交互逻辑，选中状态、数量限制、列表过滤都得自己写。
为什么 checkbox-group 的 @change 只返回 value 数组
这是设计使然：checkbox-group 仅负责收集所有被勾选的 value 值，不关心原始数据结构。如果你的数据是对象数组（比如 {id: 1, name: 'A'}），@change 回调里拿到的只是 ['1', '3'] 这样的字符串数组，必须手动映射回原数据。
- 常见错误：直接把
v-model绑定到对象数组上，结果报错或无法响应 ——v-model在checkbox-group中只接受Array<string number></string> - 正确做法：用一个独立的
selectedIds数组接收@change的值，再通过originalList.filter(item => selectedIds.includes(item.id + ''))拿到完整对象 - 注意类型：后端传来的
id很可能是 number，但checkbox的value属性始终转为 string，比较时要统一类型（推荐转成字符串比对）
uv-checkbox-group 的 placement="row" 不生效怎么办
uView 2.x 的 uv-checkbox-group 确实存在 placement 属性失效的问题，尤其在 H5 和小程序平台。这不是你写错了，而是组件内部未透传样式或 flex 布局被覆盖。
- 绕过方案：不用
placement，改用display: flex; flex-wrap: wrap包裹每个uv-checkbox，并给其加margin-right: 16rpx控制间距 - 关键点：必须移除
uv-checkbox-group的默认块级布局（它内部用了view包裹，且没设display: flex），否则子项仍会换行 - 示例结构：
<uv-checkbox-group v-model="selectedIds"> <view style="display: flex; flex-wrap: wrap"> <uv-checkbox v-for="item in list" :key="item.id" :name="item.id" style="margin-right: 16rpx">{{ item.name }}</uv-checkbox> </view> </uv-checkbox-group>
如何限制最多选 2 项并只显示已选项
这不是 UI 组件能自动完成的，得靠数据过滤 + 条件渲染。核心是两个动作：拦截多选、动态更新展示列表。
- 在
@change回调里判断e.detail.value.length > 2，如果超了，就截取前两项并重置v-model绑定的数组（例如this.selectedIds = e.detail.value.slice(0, 2)） -
displayedList计算属性不能直接用originalList，而应基于selectedIds过滤：computed: { displayedList() { return this.originalList.filter(item => this.selectedIds.includes(item.id + '')) } } - 隐藏未选项不是靠
v-if切整个列表，而是让v-for只遍历displayedList—— 这样 DOM 节点数更少，性能更好
最易忽略的是：uView 的 uv-checkbox 默认禁用 click 冒泡，如果你在外层加了 @tap 或自定义事件，可能收不到点击；另外，H5 端 checkbox 样式修改必须写在 APP.vue 全局样式里，局部 scoped style 无效。
