ElementPlus用Tree修改添加目录（vue3）

部分样式没调，可以自行调一下，我的项目做了自动导入，详见ElementPuls官方文档。

效果图：

代码：

<template>
  <div class="custom-tree-container">
    <p>目录</p>
    <el-tree
      class="custom-tree"
      ref="tree"
      node-key="id"
      :data="treeData"
      show-checkbox
      :expand-on-click-node="false"
    >
      <template v-slot="{ node, data }">
        <div v-if="!data.isEdit" class="custom-tree-node-root">
          <span class="custom-tree-node">{{ node.label }}</span>
          <section class="tree-btn-group">
            <el-tooltip content="修改" effect="light" placement="top">
              <el-icon @click.stop="editTreeItem(data)"><EditPen /></el-icon
            ></el-tooltip>
            <el-tooltip content="添加同级" effect="light" placement="top">
              <el-icon @click.stop="addSibling(data)"><Plus /></el-icon
            ></el-tooltip>
            <el-tooltip content="添加子级" effect="light" placement="top">
              <el-icon @click.stop="addChild(data)"><CirclePlus /></el-icon
            ></el-tooltip>
            <el-tooltip content="删除" effect="light" placement="top">
              <el-icon @click.stop="deleteTreeItem(node, data)"
                ><CircleClose
              /></el-icon>
            </el-tooltip>
          </section>
        </div>
        <div v-else class="custom-tree-node-root-edit">
          <el-input
            v-model="inputValue"
            size="small"
            @keyup.enter="editMenu(data)"
          />
          <section :id="data.id">
            <el-tooltip content="确定" effect="light" placement="top">
              <el-icon color="#67c23a" @click.stop="editMenu(data)"
                ><CircleCheck
              /></el-icon>
            </el-tooltip>
            <el-tooltip content="取消" effect="light" placement="top">
              <el-icon
                color="#909399"
                @click.stop="addCancel(node, data)"
                ><CircleClose
              /></el-icon>
            </el-tooltip>
          </section>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";

interface Tree {
  id: number;
  label: string;
  isEdit: boolean;
  isNew: boolean;
  children?: Tree[];
}
const tree = ref();
const treeData = ref<Tree[]>([
  {
    id: 1,
    label: "1",
    isEdit: false,
    isNew: false,
    children: [
      { id: 2, label: "2", isEdit: false, isNew: false, children: [] },
    ],
  },
]);
const inputValue = ref("");
// 编辑当前节点
const editTreeItem = (data: Tree) => {
  data.isEdit = true;
  inputValue.value = data.label; // 当前正在编辑内容赋值
};
// 添加同级节点
const addSibling = (data: Tree) => {
  const id = Math.ceil(Math.random() * 100);
  const newData = {
    id: id,
    label: "",
    isEdit: true,
    isNew: true,
    children: [],
  };
  if (!data.children) {
    data.children = [];
  }
  // 添加同级节点
  const parent = tree.value.getNode(data);
  const children: Tree[] = parent.parent.data.children || parent.parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index + 1, 0, newData);
};
//添加子级节点
const addChild = (data: Tree) => {
  const id = Math.ceil(Math.random() * 100);
  const newData = {
    id: id,
    label: "",
    isEdit: true,
    isNew: true,
    children: [],
  };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newData);
  //展开父节点
  tree.value.setCurrentKey(data.id);
};
//编辑模式修改确认
const editMenu = (data: Tree) => {
  data.isEdit = false;
  data.isNew = false;
  if (inputValue.value) {
    data.label = inputValue.value;
  }
  inputValue.value = "";
};
// 删除当前节点
const deleteTreeItem = (node: Node, data: Tree) => {
  const parent = node.parent;
  const children: Tree[] = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
};
//取消同级节点添加
const addCancel = (node: Node, data: Tree) => {
  // 如果是新增的节点，取消即是删除
  if (data.isNew) {
    deleteTreeItem(node, data);
  }
  // 如果是编辑的节点，取消即是恢复
  if (data.isEdit) {
    data.isEdit = false;
    data.label = inputValue.value;
    inputValue.value = "";
  }
};
</script>

<style scoped lang="scss">
.custom-tree-container {
  height: 300px;
  width: 300px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0.8;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
}
.custom-tree {
  //背景透明
  background: transparent;
  //字体大小
  font-size: 14px;
  //字体粗细
  font-weight: 400;
  //字体样式
  font-style: normal;
  //字体变形
  font-family: "Microsoft YaHei";
}
.custom-tree-node-root {
  display: flex;
  justify-content: space-between;
}
.custom-tree-node-root-edit {
  display: flex;
  justify-content: space-between;
}
</style>