Vue3计算属性终极实战：可媲美Element Plus Tree组件研发之节点勾选

前面完成了JuanTree组件的节点编辑和保存功能后，我们把精力放到节点勾选功能实现上来。**注意，对于组件的开发者来说，要充分考虑用户的使用场景，组件提供的多个特性同时启用时必须要工作良好。**就拿Tree组件来说，用户完全可以在启用勾选的情况下，同时启用节点增删功能，此时增删不能影响到勾选的一致性。

Tree组件的节点勾选会向下级联所有子孙节点，向上也会影响父节点的全选和半选状态。大部分教程在实现节点勾选，主导的思路就是手动的遍历处理，实现的非常麻烦；本教程的思路让功能实现变得非常简单——使用可写的计算属性即可！

在这里插入图片描述

可以拿官方的例子来复习下可写计算属性的用法：

在这里插入图片描述

然后我们开始上车，进入计算属性的终极实战，Are you ready? Gooooo!

用法示例

示例演示

在这里插入图片描述

启用设置：

在这里插入图片描述

具体实现如下

组件属性和ts类型

在JuanTree组件的可选配置上再新增一个可选项，基于它来决定是否启用节点勾选功能。

export interface OptionProps {
   
   
  ...
  checkable?: boolean // 是否启用勾选，默认不启用
}

节点勾选会用三种状态：未选中、选中和半选中，为此定义一个枚举类型：

export enum ECheckedStatus {
   
   
  UNCHECKED,
  CHECKED,
  HALF_CHECKED
}

在JuanTree的结构化节点类型ITreeNode中新增勾选相关的属性：

// 结构化节点
export interface ITreeNode {
   
   
  ...
  checkedStatus?: WritableComputedRef<ECheckedStatus> // 可写的勾选计算属性
  checked?: boolean // 是否被选中，实际操作时用到的属性，也会参与到勾选计算属性的计算中
}