全选反选技巧，表单复选框交互指南

本文深入解析了如何利用 Vue 的计算属性高效实现表单复选框的全选、反选与单个选项联动，核心在于将“全选状态”与“已选项列表”通过响应式数据源双向绑定，彻底摆脱手动同步状态的繁琐逻辑；通过 isAllChecked 计算属性的 getter/setter 自动判断和控制全选行为，借助 v-model 直接绑定数组实现单个复选框的智能增删，并用一行 filter 逻辑完成高性能反选，同时兼顾大规模数据下的查找效率与代码可读性，是 Vue 表单交互开发中简洁、健壮且可扩展的最佳实践。

用计算属性实现全选反选，核心是把“全选状态”和“已选项目列表”绑定到同一个响应式数据源上，让 Vue 自动同步两者关系，不用手动维护状态一致性。

全选状态由已选项数量决定

全选框的 v-model 应该是一个计算属性的 setter，它的值取决于当前已勾选的复选框数量是否等于总项数。这样点击全选框时，Vue 会自动根据逻辑决定是全选还是清空。

• 定义 checkedList 为响应式数组（如 ref([]) 或 reactive([])），存所有已选项的唯一标识（如 id）
• 定义 allList 为全部可选项数组，每个对象带 id 和 name
• 计算属性 isAllChecked 的 getter 返回 checkedList.length === allList.length
• setter 根据新值，清空或填满 checkedList：若为 true，则赋值 allList.map(i => i.id)；否则赋空数组

单个复选框联动更新已选项

每个复选框的 v-model 绑定到一个计算属性，该属性读取 checkedList 是否包含当前项 id，并在变更时增删 id。

• 为每个 item 写一个计算属性（或用函数返回）：computed({ get() { return checkedList.includes(item.id) }, set(checked) { checked ? checkedList.push(item.id) : checkedList.splice(checkedList.indexOf(item.id), 1) } })
• 更简洁写法：直接用 v-model="checkedList" :value="item.id"（需配合 Array 类型的 v-model，Vue 3 支持）
• 注意去重：push 前判断是否存在，或用 new Set 管理再转回数组

反选只需一行逻辑

反选不是独立状态，而是对当前 checkedList 的批量翻转操作，用 filter 配合 includes 即可完成。

• 定义方法 toggleAll()：将 checkedList 更新为 allList.filter(i => !checkedList.includes(i.id)).map(i => i.id)
• 可进一步封装为计算属性的 setter，或直接作为按钮事件处理函数
• 无需额外响应式变量，不破坏单向数据流，也避免冗余状态

兼顾性能与可读性的小技巧

当选项量大时，避免每次 getter 都遍历全量数组；用 ref 缓存关键判断结果，但保持响应式依赖链不断开。

• 用 computed(() => new Set(checkedList)) 提升查找效率，替代频繁 includes
• 如果 allList 是静态或低频更新，可提前生成 id 映射对象提升性能
• 模板中尽量用 v-model 而非 :checked + @change，减少手动事件处理代码

以上就是《全选反选技巧，表单复选框交互指南》的详细内容，更多关于的资料请关注golang学习网公众号！