Vue3可媲美Element Plus Tree组件研发之重命名节点

最新推荐文章于 2025-10-24 12:35:40 发布

原创

最新推荐文章于 2025-10-24 12:35:40 发布 · 682 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vite #vue3 #自定义Tree #tsx

在上一节《移除节点》基础上继续迭代JuanTree的功能，我们将实现节点重命名的功能。

在这里插入图片描述

实现效果：

可以对现有节点进行编辑，点回车或失去焦点完成编辑，如果输入为空，会恢复为原来的值。同时支持对新增的节点自动启用编辑功能，以方便用户操作。

关于节点名称重复检查

注意，这里对于节点编辑只做了非空限制，节点名称重复前端不处理哦，对于节点的变更在提交后台时可以再进行统一的校验或者交给后台校验，目前的实现是这样的。因为考虑到在懒加载的情况下启用节点的编辑功能，检查标签名是否重复需要调用远程接口判断，因此我们干脆取消这一独立的检查功能，简化开发的难度，后续可以再完善噢~

在这里插入图片描述

用法示例

只需要调用插槽返回对象的startEdit()方法即可。

在这里插入图片描述

具体实现

属性和方法

新增一个表示节点编辑中的属性：

// 扩展的扁平化节点
export interface IFlatTreeNode extends ITreeNode {
   
   
  ...
  editing?: boolean // 节点处于编辑中
}

新增触发节点编辑的用户API操作方法：

// 用户可进行节点操作的接口，该接口是提供给用户的。
export interface ITreeNodeOperation {
   
   
  ...
  startEdit: () => void // 触发节点编辑的方法
}

tsx组件完善

渲染树节点名称的地方调整下：

{
   
   /* 非编辑状态下渲染标签名 */}
{
   
   !node.editing ? (
node[labelName as 'label']
) : (
/* 编辑状态下渲染一个输入框 */
<input
  class='box-border h-[21px] border border-solid'<