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

news2024/9/21 19:08:00

前面完成了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 // 是否被选中，实际操作时用到的属性，也会参与到勾选计算属性的计算中
}

计算属性核心逻辑

在utils.ts工具中编写结构化节点ITreeNode的初始化绑定函数，关键代码的注释都加了，操作逻辑非常的简单易读：

// 初始化结构化节点
function initTreeNode(treeNode: ITreeNode, props: OptionProps) {
  // 如果没有启用checkable，则返回
  if (!props.checkable) return
  // 获得节点的响应式操作对象
  const node = ref(treeNode).value
  const childrenName = props.childrenName as 'children'
  // 绑定节点的勾选计算属性
  treeNode.checkedStatus = computed({
    get() {
      // 如果是叶子节点，返回checked属性值
      if (!node[childrenName]) {
        // 叶子节点只有两种状态：选中和未选中
        return node.checked ? ECheckedStatus.CHECKED : ECheckedStatus.UNCHECKED
      } else {
        // 父节点的勾选状态判断逻辑，需要统计子节点的勾选状态
        let checkedCount = 0,
          uncheckedCount = 0
        // 遍历子一代节点列表
        node[childrenName].forEach((item) => {
          // 获取子节点的勾选计算属性得到的状态枚举值
          const status = item.checkedStatus
          // 统计选中的数量
          if (status === ECheckedStatus.CHECKED) {
            checkedCount++
          } else if (status === ECheckedStatus.UNCHECKED || status == null) {
            // 统计未选中的数量
            uncheckedCount++
          }
        })
        const childrenLength = node[childrenName].length
        // 先进行全选中的判断：存在选中的且选中数量等于子一代节点数量
        if (checkedCount > 0 && checkedCount === childrenLength) {
          return ECheckedStatus.CHECKED
        } else if (uncheckedCount === childrenLength) {
          // 再进行未选中的判断：没有全选中并且未选中的数量等于子一代节点数量
          return ECheckedStatus.UNCHECKED
        } else {
          // 其余则归结为半选
          return ECheckedStatus.HALF_CHECKED
        }
      }
    },
    set(status: ECheckedStatus) {
      // 基于写入的状态来判断checked值
      const checked = status === ECheckedStatus.CHECKED
      // 设置checked属性
      node.checked = checked
      // 如果是父节点则进行子一代节点的级联设置，注意设置子节点的checkedStatus计算属性会触发递归调用，达到我们向下递归设置的目的！
      if (node[childrenName]) {
        node[childrenName].forEach((child) => {
          child.checkedStatus = status
          child.checked = checked
        })
      }
    }
  })
}

初始化扁平化节点的逻辑完善：

在这里插入图片描述

新增一级节点的处理逻辑完善：

在这里插入图片描述

Tree原始数据结构拍平函数的完善：

在这里插入图片描述

tsx模板完善

新增一个点击勾选的事件处理函数

// 节点勾选点击事件处理函数
const checkNode = (node: IFlatTreeNode) => {
  // 注意，是对原始节点进行操作
  const oNode = node.originalNode
  const status = oNode.checkedStatus as any
  // 如果没有选中（可能是半选），执行选中的计算属性写入
  if (status !== ECheckedStatus.CHECKED) {
    oNode.checkedStatus = ECheckedStatus.CHECKED as any
  } else {
    // 如果选中则执行反选写入计算属性
    oNode.checkedStatus = ECheckedStatus.UNCHECKED as any
  }
}