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.mzph.cn/web/49257.shtml

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

相关文章

【python学习】思考-如何在PyCharm中编写一个简单的Flask应用示例以及如何用cProfile来对Python代码进行性能分析

引言 Python中有两个流行的Web框架&#xff1a;Django和Flask。Django是一个高级的Python Web框架&#xff0c;它鼓励快速开发和干净、实用的设计&#xff1b;Flask是一个轻量级的Web应用框架&#xff0c;适用于小型到大型应用。以下是使用Flask创建一个简单应用的基本步骤cPro…

从工业到航空:旋转花键跨行业的多样用途解析!

旋转花键是一种新型的高效传动元件&#xff0c;主要由内花键和外花键组成。内花键和外花键之间放置着一排排滚珠&#xff0c;当内花键和外花键相对旋转时&#xff0c;滚珠在内、外花键之间滚动&#xff0c;从而实现动力的传递。 旋转花键的基本功能主要是用于连接轴和套的旋转部…

mmdetection训练后评估指标,验证Loss

项目场景&#xff1a; 对mmdetection框架下训练好的log.json文件进行评估。 问题描述 使用框架底下自带的评估文件&#xff0c;不能对loss进行评估。也就是文件&#xff1a;tools/analysis_tools/analyze_logs.py 解决方案&#xff1a; 自己做了评估loss的代码&#xff0c;目…

力扣94题(java语言)

题目 思路 使用一个栈来模拟递归的过程&#xff0c;以非递归的方式完成中序遍历(使用栈可以避免递归调用的空间消耗)。 遍历顺序步骤&#xff1a; 遍历左子树访问根节点遍历右子树 package algorithm_leetcode;import java.util.ArrayList; import java.util.List; import…

重磅发布:OpenAI宣布推出AI驱动的搜索引擎SearchGPT,将与Google和Perplexity展开竞争|TodayAI

OpenAI宣布推出其备受期待的AI驱动搜索引擎SearchGPT。该搜索引擎能够实时访问互联网信息&#xff0c;并将作为原型在有限范围内发布&#xff0c;计划最终将其功能整合到ChatGPT中。 SearchGPT的功能特点 SearchGPT是一个具有实时互联网信息访问能力的AI驱动搜索引擎。它的界面…

轨道式智能巡检机器人,助力综合管廊安全运维

1 引言 当前城市综合管廊建设已经成为世界范围内的发展趋势&#xff0c;2017年5月住建部、发改委联合发布《全国城市市政基础设施建设“十三五”规划》&#xff0c;截至2017年4月底国内地下综合管廊试点项目已开工建设687 km&#xff0c;建成廊体260 km&#xff0c;完成投资40…

用python程序发送文件(python实例二十六)

目录 1.认识Python 2.环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3.文件上传 3.1 代码构思 3.2 服务端代码 3.3 客户端代码 3.4 运行结果 4.总结 1.认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具…

C++图网结构算法

目录 一.迪杰斯特拉算法&#xff08;dijkstra&#xff09; 1.实现原理&#xff1a; 2.代码实现&#xff1a; 3.例题&#xff1a; 二.spfa算法&#xff1a; 1.实现原理&#xff1a; 2.代码实现&#xff1a; 3.例题&#xff1a; 三.贝尔曼福特&#xff08;bellman_ford&…

【嵌入式硬件】快衰减和慢衰减

1.引语 在使用直流有刷电机驱动芯片A4950时,这款芯片采用的是PWM控制方式,我发现他的正转、反转有两种控制方式,分别是快衰减和慢衰减。 2.理解 慢衰减:相当于加在电机(感性原件)两端电压消失,将电机两端正负短接。 快衰减:相当于加在电机(感性原件)两端电压消失,将电机…

AcWing-差分矩阵

insert函数影响范围&#xff0c;在b差分数组这样操作影响到是a里面的&#xff0c;所以下图的矩阵表示的是a数组 b[x1][y1]c;会导致a里面仅绿色范围的a[i][j]c b[x1][y21]-c;会导致a里面仅黄色范围的a[i][j]-c b[x21][y1]-c;会导致a里面仅蓝色范围的a[i][j]-c b[x21][y21]c;会导…

什么情况下的网站要使用CDN加速呢?

CDN的全称是Content Delivery Network&#xff0c;即内容分发网络。 CDN的通俗理解就是网站加速&#xff0c;CPU均衡负载&#xff0c;可以解决跨运营商&#xff0c;跨地区&#xff0c;服务器负载能力过低&#xff0c;带宽过少等带来的网站打开速度慢等问题。 原理就是在客户端…

Java聚合快递系统对接云洋系统快递小程序系统源码

&#x1f680; "聚合快递系统"无缝对接云洋系统&#xff0c;快递小程序新体验&#xff01;&#x1f4e6; &#x1f69a; 开篇&#xff1a;快递管理新纪元&#xff0c;一键接入云洋系统&#xff01; 你是否还在为繁琐的快递管理而头疼&#xff1f;多个快递公司账号切…

新手必备:iPhone新机官网验机流程详解

目录 一、准备工作 二、外包装检查 三、序列号查询 四、开箱验机 五、开机验机 六、功能检测 七、售后服务验证 八、总结 一、准备工作 检查包裹&#xff1a;确保快递包裹完好无损。准备录像设备&#xff1a;使用另一台设备录制整个验机过程&#xff0c;以防日后发生纠…

无人机公司销售需要什么资质

国家民航局于2024年1月1日实施了《无人驾驶航空器飞行管理暂行条例》&#xff0c;根据这个管理条例里面的 第十一条 使用除微型以外的民用无人驾驶航空器从事飞行活动的单位应当具备下列条件&#xff0c;并向国务院民用航空主管部门或者地区民用航空管理机构申请取得民用无人驾…

从社区走向产业,让数据价值的流动像自来水一样即开即用|隐语开源两周年特别活动

“隐语”是开源的可信隐私计算框架&#xff0c;内置 MPC、TEE、同态等多种密态计算虚拟设备供灵活选择&#xff0c;提供丰富的联邦学习算法和差分隐私机制 开源项目 github.com/secretflow gitee.com/secretflow 数据要素市场规模指数级增长&#xff0c;数据要素逐渐流向千行…

北大延毕硕士×INFJ | 我解脱了

前言 拿了双证&#xff0c;我终于能静下心来复盘一下我延毕一年的经历了。 给后面也许有相同困境的朋友们做个参考或者心理疏导作用。 延毕的原因 我延毕的主要原因是论文研三的时候论文没有完成&#xff0c;我们专业的论文一般是6个月全身心投入可以完成。我这个人是典型的…

数字创意赋能数字文创产业园,树莓集团立志打造全球文化创新标杆

在数字化和全球化的时代&#xff0c;文化创意产业正迎来前所未有的发展机遇。树莓集团作为行业的领军者&#xff0c;正通过其在数字文创产业园的努力&#xff0c;赋能数字文创产业&#xff0c;致力于打造全球文化创新标杆。 在树莓集团的战略布局下&#xff0c;数字文创产业园不…

7月26日贪心练习-摆动序列专题

前言 大家好&#xff0c;今天学习用贪心思想解决摆动序列问题&#xff0c;共三题&#xff0c;分享自己的思路&#xff0c;请大家多多支持 算法思想 大家可以先看看这道我们后面会讲的题看看怎么个事&#xff0c;. - 力扣&#xff08;LeetCode&#xff09; 由此题题解说明算…

MySQL练手 --- 1789. 员工的直属部门

题目链接&#xff1a;1789. 员工的直属部门 这道题虽然是个简单题&#xff0c;但是"坑"倒是不少&#xff0c;所以记录一下 思路&#xff1a; 题目要干&#xff1a; 一个员工可以属于多个部门。当一个员工加入超过一个部门的时候&#xff0c;他需要决定哪个部门是…