全选状态由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）：
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 - 写法示例：
return selectedIds.value.size > 0 && selectedIds.value.size });
模板中正确绑定 checkbox
全选框需同时绑定 v-model 和 :indeterminate，才能完整呈现三种状态：
-
v-model绑定到一个可写的计算属性（或 ref），用于控制勾选/取消 -
:indeterminate绑定isIndeterminate，只读，不参与 v-model - 示例：
:checked="isAllChecked"
:indeterminate="isIndeterminate"
@change="toggleAll" />
配合 toggleAll 实现双向同步
点击全选框时，不是直接改 isAllChecked，而是通过方法批量操作 selectedIds：
- 勾选 → 用
new Set(props.list.map(i => i.id))替换整个集合 - 取消 → 直接赋值
selectedIds.value = new Set() - 这样能确保
isAllChecked和isIndeterminate自动重新计算，无需手动触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
