当前位置：首页 > news >正文

Vue3可媲美Element Plus Tree组件开发之append节点

news 来源：原创 2024/9/8 10:51:05

在前面的章节，我们完成了可媲美Element Plus Tree组件的基本开发。通过实现各种计算属性，tree数据状态变化引起的视图更新被计算属性所接管了，无需我们再手动做各种遍历、查找以及手动监听操作，这样后续开发高级功能变得易如反掌啦！！

在这里插入图片描述

看下提供给用户的vitepress文档说明：

在这里插入图片描述

操作演示：

在这里插入图片描述

前面我们实现了几个计算属性：

index

节点在扁平化列表中的位置索引
length

父节点的所有子孙节点的长度
visibleLength

可见子孙节点的长度
lineLength

参照线的长度

这些计算属性在新增一个节点，尤其是子节点时都会被影响到，触发重新计算以保证前面实现的基本功能是完好的。而无需我们在实现新增节点时再去兼顾基础功能，这就是Vue3 composition api的计算属性的魅力，让复杂的功能变得简单，组件的开发者只需要把关注点放到影响计算属性变化的数据上即可，Life is so easy!

新增类型、接口

定义ts的类型和接口，注意给用户提供的接口一定要遵循“迪米特法则”。

在这里插入图片描述

核心插入逻辑

/*** 新增顶级节点* @param child 要新增的叶子节点* @param data 扁平化节点列表* @param treeData 结构化节点树* @param optionProps 组件配置选项*/
export function appendTop(child: ILeafNode, data: IFlatTreeNode[], treeData: ITreeNode[], optionProps: OptionProps) {// 节点id命名逻辑：如果指定了就用用户指定的，否则按照列表长度生成child.id = child.id || 'id-' + (data.length + 1)// 从新增节点拷贝数据作为original child nodeconst ocNode = { ...child }// 扁平化new child nodeconst ncNode = {...child,level: 1,isLeaf: true,originalNode: ocNode} as IFlatTreeNode// 要插入的位置为列表最后const insertIndex = data.length// 绑定新插入的扁平化节点的前置节点ncNode.prev = data[data.length - 1]// 对新的扁平化节点进行初始化initFlatTreeNode(ncNode, optionProps)// 原始树结构中新增节点，注意！！操作的是响应式数据ref(treeData).value.push(ocNode as never)// 扁平化列表中插入新节点ref(data).value.splice(insertIndex, 0, ncNode as never)
}function initFlatTreeNode(node: IFlatTreeNode, optionProps: OptionProps) {.../*** 给扁平化节点绑定新增子节点的方法* @param child 新增的子节点* @param data 扁平化列表*/node.append = (child: ILeafNode, data: IFlatTreeNode[]) => {// 同新增一级节点child.id = child.id || 'id-' + (data.length + 1)// 当前节点原始节点const oNode = node.originalNode// 新增节点原始节点const ocNode = { ...child }// 新增节点扁平化节点const ncNode = {...child,parent: node, // 绑定父节点level: node.level + 1,isLeaf: true,originalNode: ocNode} as IFlatTreeNode// 计算插入位置const insertIndex = calcInsertIndex(node)// 插入到最后的情况下，设置前置节点if (insertIndex === data.length) {ncNode.prev = data[data.length - 1]} else {// 插入到中间，绑定prev的逻辑，把prev链接起来const next = data[insertIndex]ncNode.prev = next.prev// 注意操作的是响应式对象，以确保可以触发index属性重新计算！！ref(next).value.prev = ncNode as never}// 初始化扁平化节点initFlatTreeNode(ncNode, optionProps)// 通过响应式对象获取其操作对象const oNodeVal = ref(oNode).valueconst nodeVal = ref(node).valueconst childrenName = optionProps.childrenName as 'children'// 对原先的叶子节点进行设置和初始化，变为非叶子节点if (!oNodeVal[childrenName]) {oNodeVal[childrenName] = []initParentNode(oNode, optionProps)nodeVal.isLeaf = false}// 插入到原始结构化节点oNodeVal[childrenName].push(ocNode as never)// 所在的节点将其展开（如果折叠的话）oNodeVal.expanded = truenodeVal.expanded = true// 插入到扁平化节点列表ref(data).value.splice(insertIndex, 0, ncNode as never)}
}/*** 插入子节点位置逻辑：如果是叶节点，则为下一个位置，否则要加上子一代节点的长度* @param node*/
function calcInsertIndex(node: IFlatTreeNode): number {return node.index.value + 1 + (node.isLeaf ? 0 : node.originalNode.length!.value)
}

Tree组件模板调整

原先给icon插槽传入的节点参数，不符合迪米特法则，暴露了内部操作属性和方法，规范的做法是拷贝一个副本！！只给用户提供其关心的几个属性，调整为：

在这里插入图片描述

对于一级节点新增操作，我们将对tree组件expose一个可操作的对象，为此把这个对象中要定义的方法抽取到ts接口中，以方便客户端API的使用：

// Tree组件对外导出的方法定义
export interface ExposeProps {appendTop: (newNode: ILeafNode) => void
}

导出逻辑：

在这里插入图片描述

而针对节点的操作，给用户提供的API，包装一个函数来返回要操作的接口：

// 返回节点操作方法的函数
const nodeOperation = (node: IFlatTreeNode): ITreeNodeOperation => {// 注意，这里不应该直接给用户提供node，而是要包成对外公开的ITreeNodeOperation，遵循迪米特法则！！return {append(newNode: ILeafNode) {node.append(newNode, originalFlatData)}}
}