计算属性实现全选反选，表单交互教程

本文深入讲解如何利用 Vue 的 computed 计算属性优雅实现表单中的全选、反选与半选交互逻辑——通过为全选框定义兼具 getter 和 setter 的 selectAll 计算属性，动态推导全选/半选状态（而非手动维护 isAllSelected 等冗余数据），结合 :indeterminate 精准控制 checkbox 的视觉状态，并让每个子项通过 v-model 直接绑定自身 checked 字段，确保响应式更新零遗漏；同时提供可直接复用的已选 ID 数组计算逻辑，大幅提升表单开发的简洁性、健壮性与可维护性。

用 computed 实现全选/反选，核心是把“是否全选”和“是否半选”这两个状态从数据中推导出来，而不是手动维护。Vue 的响应式系统会自动更新，逻辑更清晰、不易出错。

全选状态由子项决定，不是独立变量

不要单独定义一个 isAllSelected data 字段去控制全选按钮。应该用 computed 动态计算：

• 全选：所有子项的 checked 都为 true
• 无一选中：所有子项的 checked 都为 false
• 半选（indeterminate）：部分为 true，部分为 false —— 这个状态无法通过 checkbox 的 v-model 直接体现，需用 :indeterminate 手动设置

在 template 中正确绑定全选 checkbox

全选框的 v-model 绑定到一个 computed 的 selectAll（有 getter 和 setter）：

• getter 返回是否“全选”（即所有子项都选中）
• setter 接收新值（true/false），并批量更新所有子项的 checked
• 同时用 :indeterminate 绑定半选状态（当非全选且非全不选时为 true）

<input
  type="checkbox"
  v-model="selectAll"
  :indeterminate="isIndeterminate"
/>

子项 checkbox 要用 v-model 双向绑定到各自数据

每个列表项应有独立的 checked 字段（如存在 item 对象中），用 v-model 直接绑定：

• 这样勾选/取消子项时，对应数据自动更新
• computed 依赖的数据变化后，selectAll 和 isIndeterminate 自动重新计算
• 避免使用 @change + 手动修改数组，否则容易漏掉响应式更新

补充：获取当前已选中的 ID 列表（实用场景）

常需要提交选中的 ID 数组。可以再写一个 computed：

• 过滤出 checked: true 的项
• 映射出 id 字段，得到纯 ID 数组
• 这个数组也完全响应式，随时可用在按钮禁用、请求参数等地方

今天关于《计算属性实现全选反选，表单交互教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！