Vue3可媲美Element Plus Tree组件实战之移除节点

Element Plus Tree自定义节点内容示例中介绍了移除节点的用法,个人觉得作为提供给用户API,应该遵循迪米特法则,把功能实现的细节封装在组件内部,而提供给用户最简单的操作方式,同时在此基础上支持用户的扩展。

因此,在API使用的人性化方便,个人觉得element plus做的并不优秀。为此,我们自定义tree组件时对用户API可以设计的更人性化些。

在这里插入图片描述

用法示例

在这里插入图片描述

看下使用示例

在这里插入图片描述

直接操作插槽传入的操作对象的remove方法即可。传入一个回调函数,该回调函数接收一个只读的IFlatTreeNode类型,仅包含idisLeaflevel属性,而其他属性和方法对用户屏蔽,严格遵循迪米特设计原则!

再看回调函数:

在这里插入图片描述

这里咱们给用户提供了灵活的promise编程风格,因为考虑到是否删除的逻辑,可能需要关联一些数据进行远程的校验,比如查库,所以这种情况下用promise再好不过咯!

前端删除与后端删除

注意,这里提供的回调方法仅用于判断是否能删除,咱们并不在这个方法中做后台删除逻辑,然后通过resolve进行前端删除同步,这并不是我们的意图!!咱们这里仅考虑前端删除!将前端节点的变更同步到后台,咱们后面会进一步迭代JuanTree来实现这一需求噢~

下面是具体的实现。

操作接口定义

在扁平化节点类型IFlatTreeNode上新增一个节点移除方法的声明:

export interface IFlatTreeNode extends ITreeNode {...// 内部删除方法remove: (flatData: IFlatTreeNode[], treeData: ITreeNode[]) => void
}

注意,这个方法是内部使用的,并不会暴露给用户。

给用户提供的接口如下:

// 给用户提供的回调接口,回调逻辑用户自行实现,
// 方法是同步的,注意返回值为Promise,看Promise的执行动作才决定是否要执行节点移除
export interface RemoveCall {(node: IFlatTreeNode): Promise<void>
}
// 用户可进行节点操作的接口,该接口是提供给用户的。
export interface ITreeNodeOperation {...// 提供给用户的节点移除方法,用户传入一个回调,来决定是否要删除节点remove: (call: RemoveCall) => void
}

移除节点核心逻辑

代码实现配有详尽的注释说明,很好理解:

function initFlatTreeNode(node: IFlatTreeNode, optionProps: OptionProps) {...// 绑定节点的移除方法node.remove = (flatData: IFlatTreeNode[], treeData: ITreeNode[]) => {// 在层级结构中删除const level = node.levelconst index = node.index.valueif (level === 1) {// 移除一级节点removeNode(ref(treeData).value as never, node)} else {// 获取父节点响应式对象const pNode = ref(node.parent!).value// 父节点的原始节点对象const opNode = ref(pNode.originalNode).valueconst childrenName = optionProps.childrenName as 'children'// 移除内层节点removeNode(opNode[childrenName]! as never, node)// 如果移除后,父节点变为叶子节点,做如下处理if (opNode[childrenName]!.length === 0) {pNode.isLeaf = truedelete opNode[childrenName]delete opNode.expandeddelete opNode.lengthdelete opNode.visibleLengthdelete opNode.lineLength}}// 计算移除后后续要接入的next节点const childrenLength = node.originalNode.length?.value || 0const next = flatData[index + childrenLength + 1]// 从扁平化节点列表中移除ref(flatData).value.splice(index, childrenLength + 1)// 如果存在next节点,则执行prev的指向逻辑if (next) {// 指向被删除节点的前一个节点(prev指向的),如果被删除的节点就是第一个节点,则prev赋值为undefinedref(next).value.prev = (index > 0 ? node.prev : undefined) as never}}
}// 从嵌套结构中移除节点
function removeNode(data: ITreeNode[], node: ITreeNode) {const index = data.findIndex((item) => item.id === node.id)if (index >= 0) {data.splice(index, 1)}
}

tsx功能完善

对外提供的接口中新增移除方法:

// 返回节点操作方法的函数
const nodeOperation = (node: IFlatTreeNode): ITreeNodeOperation => {// 注意,这里不应该直接给用户提供node,而是要包成对外公开的ITreeNodeOperation,遵循迪米特法则!!return {...  async remove(call: RemoveCall) {try {await call({id: node.id,level: node.level,isLeaf: node.isLeaf} as IFlatTreeNode)node.remove(originalFlatData, data)} catch (msg) {console.warn(msg)}}}
}

Promise编程

这里应用了Promise编程,对于用户传入的回调函数,给其传入一个只读的节点对象进行调用,而返回结果是一个promise对象,这里用了await等其调用resolve()来返回,然后执行后续的删除;如果用户逻辑中执行了reject('错误信息...'),则进入catch,向控制台输出警告。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/386163.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口测试支持IDEA插件一键同步API、新增思维导图快速评审测试用例,MeterSphere开源持续测试工具v3.1.0版本发布

2024年7月29日&#xff0c;MeterSphere开源持续测试工具正式发布v3.1.0版本。 在这一版本中&#xff0c;接口测试方面&#xff0c;支持通过IDEA插件一键同步API至MeterSphere&#xff1b;测试管理方面&#xff0c;“测试用例”模块新增通过思维导图模式快捷评审测试用例。在“…

挑战房市预测领头羊:KNN vs. 决策树 vs. 线性回归

挑战房市预测领头羊&#xff08;KNN&#xff0c;决策树&#xff0c;线性回归&#xff09; 1. 介绍1.1 K最近邻&#xff08;KNN&#xff09;&#xff1a;与邻居的友谊1.1.1 KNN的基础1.1.2 KNN的运作机制1.1.3 KNN的优缺点 1.2 决策树&#xff1a;解码房价的逻辑树1.2.1 决策树的…

CSS实现文本溢出处理

1.单行文本溢出 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wid…

总结——TI_音频信号分析仪

一、简介 设备&#xff1a;MSPM0G3507 库&#xff1a;CMSIS-DSP TI 数据分析&#xff1a;FFT 软件&#xff1a;CCS CLion MATLAB 目的&#xff1a;对音频信号进行采样&#xff08;滤波偏置处理&#xff09;&#xff0c;通过FFT获取信号的频率成分&am…

【Vue3】watchEffect

【Vue3】watchEffect 背景简介开发环境开发步骤及源码 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子。本文…

了解Selenium中的WebElement

Selenium中到处都使用WebElement来执行各种操作。什么是WebElement&#xff1f;这篇文章将详细讨论WebElement。 Selenium中的WebElement是一个表示网站HTML元素的Java接口。HTML元素包含一个开始标记和一个结束标记&#xff0c;内容位于这两个标记之间。 HTML元素的重命名 …

C#插件 调用存储过程(输出参数类型)

存储过程 CREATE PROCEDURE [dbo].[GetSum]num1 INT,num2 INT,result INT OUTPUT AS BEGINselect result num1 num2 END C#代码 using Kingdee.BOS; using Kingdee.BOS.App.Data; using Kingdee.BOS.Core.Bill.PlugIn; using Kingdee.BOS.Util; using System; using System.…

放大电路总结

补充: 只有直流移动时才有Rbe动态等效电阻 从RsUs看进去,实际上不管接了什么东西都能够看成是一个Ri(输入电阻) Ri Ui/Ii Rb//Rbe Ui/Us Ri/(RiRs) Aus (Uo/Ui)*(Ui/Us) Au *Ri/(RiRs) 当前面是一个电压源的信号 我们就需要输入电阻更大 Ro--->输出电阻--->将…

基于FFmpeg和SDL的音视频解码播放的实现过程与相关细节

目录 1、视频播放器原理 2、FFMPEG解码 2.1 FFMPEG库 2.2、数据类型 2.3、解码 2.3.1、接口函数 2.3.2、解码流程 3、SDL播放 3.1、接口函数 3.2、视频播放 3.3、音频播放 4、音视频的同步 4.1、获取音频的播放时间戳 4.2、获取当前视频帧时间戳 4.3、获取视…

MongoDB教程(二十三):关于MongoDB自增机制

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…

加密货币赋能跨境电商:PayPal供应链金融服务如何引领行业新趋势

跨境电商行业近年来呈现出爆发式增长&#xff0c;随着全球化贸易壁垒的降低和数字经济的快速发展&#xff0c;越来越多的商家和消费者跨越国界进行交易。根据eMarketer的数据&#xff0c;全球跨境电商交易额在2023年已超过4万亿美元&#xff0c;并预计在未来几年内仍将保持两位…

《Java初阶数据结构》----6.<优先级队列之PriorityQueue底层:堆>

前言 大家好&#xff0c;我目前在学习java。之前也学了一段时间&#xff0c;但是没有发布博客。时间过的真的很快。我会利用好这个暑假&#xff0c;来复习之前学过的内容&#xff0c;并整理好之前写过的博客进行发布。如果博客中有错误或者没有读懂的地方。热烈欢迎大家在评论区…

ProxmoxPVE虚拟化平台--安装PVE虚拟机

Proxmox 虚拟机 Proxmox是一个基于Debian Linux和KVM的虚拟化平台&#xff0c;‌它提供了虚拟化的环境&#xff0c;‌允许用户在同一台物理机上运行多个虚拟机。‌Proxmox虚拟环境&#xff08;‌PVE&#xff09;‌是一个开源项目&#xff0c;‌由Proxmox Server Solutions Gmb…

重生之我当程序猿外包

第一章 个人介绍与收入历程 我出生于1999年&#xff0c;在大四下学期进入了一家互联网公司实习。当时的实习工资是3500元&#xff0c;公司还提供住宿。作为一名实习生&#xff0c;这个工资足够支付生活开销&#xff0c;每个月还能给父母转1000元&#xff0c;自己留2500元用来吃…

科普文:万字详解Kafka基本原理和应用

一、Kafka 简介 1. 消息引擎系统ABC Apache Kafka是一款开源的消息引擎系统&#xff0c;也是一个分布式流处理平台。除此之外&#xff0c;Kafka还能够被用作分布式存储系统&#xff08;极少&#xff09;。 A. 常见的两种消息引擎系统传输协议&#xff08;即用什么方式把消息…

探索 Milvus 存储系统:如何评估和优化 Milvus 存储性能

欢迎来到探索 Milvus 系列。Milvus 是一款支持水平扩展和具备出色性能的开源向量数据库。Milvus 的核心是其强大的存储系统&#xff0c;是数据持久化和存储的关键基础。该系统包括几个关键组成部分&#xff1a;元数据存储&#xff08;meta storage&#xff09;、消息存储&#…

LexLIP——图片搜索中的多模态稀疏化召回方法

LexLIP——图片搜索中的多模态稀疏化召回方法 FesianXu 20240728 at WeChat Search Team 前言 最近笔者在回顾&笔记一些老论文&#xff0c;准备整理下之前看的一篇论文LexLIP&#xff0c;其很适合在真实的图片搜索业务场景中落地&#xff0c;希望笔记能给读者带来启发。如…

深度学习趋同性的量化探索:以多模态学习与联合嵌入为例

深度学习趋同性的量化探索&#xff1a;以多模态学习与联合嵌入为例 参考文献 据说是2024年最好的人工智能论文&#xff0c;是否有划时代的意义&#xff1f; [2405.07987] The Platonic Representation Hypothesis (arxiv.org) ​arxiv.org/abs/2405.07987 趋同性的量化表达 …

【2024蓝桥杯/C++/A组/零食采购】

题目 方法 最近公共祖先lca的倍增算法binary lifting 深度优先搜索 二进制模拟 代码 #include<bits/stdc.h> using namespace std;// 定义常量N const int N 1e510;// 边的集合 vector<int> edge[N]; // 每个节点对应的数值 int num[N]; // 父节点数组&#x…

VS code 与Pycharm 的使用区别(个人)

注明&#xff1a;本文从这开始VS code简称VS&#xff0c;Pycharm简称PY 安装包大小 VS:PY 1:0 安装后实际大小 vs py VS:PY 2:0 界面ui&#xff08;简易&#xff09; vs py VS:PY 2:1 启动速度 VS:PY 3:1 注&#xff1a;以上为个人测评&#xff0c;无特殊意图