全选状态由isAllChecked计算属性控制，要求列表非空且已选ID数等于总长度；半选状态由isIndeterminate控制，要求已选ID数大于0但小于总长度；二者互斥且依赖selectedIds和list的响应式更新。

Vue 3 中用 computed 实现全选与半选状态联动，关键在于把“是否全选”和“是否半选”定义为两个独立但强关联的计算属性，它们都依赖于当前已选 ID 集合与总列表长度。不靠手动判断或频繁遍历，而是让响应式系统自动追踪变化、高效更新。

全选状态：isAllChecked

这个计算属性决定全选复选框是否勾上，逻辑是：列表非空且所有项都被选中。

• 必须检查 list.length > 0，避免空列表时 selectedIds.length === 0 导致误判为“全选”
• 使用 selectedIds.size === list.length 判断是否全部命中（推荐用 Set 存 ID，性能好）
• 写法示例（组合式 API）：

  const isAllChecked = computed(() => {
    return props.list.length > 0 && selectedIds.value.size === props.list.length;
  });

半选状态：isIndeterminate

这个计算属性控制复选框的 indeterminate 属性，视觉上显示横线，表示“部分选中”。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 条件是：至少选了一个，但没选满
• 注意它和 isAllChecked 是互斥但共存的——全选时 isIndeterminate 必须为 false，不能同时为 true
• 写法示例：

  const isIndeterminate = computed(() => {
    return selectedIds.value.size > 0 && selectedIds.value.size   });

模板中正确绑定 checkbox

全选框需同时绑定 v-model 和 :indeterminate，才能完整呈现三种状态：

立即学习“前端免费学习笔记（深入）”；

• v-model 绑定到一个可写的计算属性（或 ref），用于控制勾选/取消
• :indeterminate 绑定 isIndeterminate，只读，不参与 v-model
• 示例：

  type="checkbox"
  :checked="isAllChecked"
  :indeterminate="isIndeterminate"
  @change="toggleAll" />

配合 toggleAll 实现双向同步

点击全选框时，不是直接改 isAllChecked，而是通过方法批量操作 selectedIds：

• 勾选 → 用 new Set(props.list.map(i => i.id)) 替换整个集合
• 取消 → 直接赋值 selectedIds.value = new Set()
• 这样能确保 isAllChecked 和 isIndeterminate 自动重新计算，无需手动触发