vue3 ts element-plus el-tree添加树节点 删除树节点 修改树节点

                    <el-tree
                      ref="treeRef"
                      :data="data"
                      :expand-on-click-node="false"
                      :highlight-current="true"
                      :props="defaultProps"
                      class="menu-tree"
                      default-expand-all
                      draggable
                      node-key="id"
                      @node-click="handleNodeClick"
                    >

                      <template #default="{ node, data }">
                        <span class="custom-tree-node">
                           <template v-if="!isEditing || editingNodeId !== data.id">
                             {{ node.label }}
                           </template>
                           <template v-else>
                             <el-input
                               v-model="editingNodeLabel"
                               @blur="cancelEdit"
                               @keyup.enter="updateNodeLabel(data)"
                             ></el-input>
                           </template>
                          <span>
                            <a :style="{marginRight: '0.5rem'}" @click="append(data)">
                              <el-icon :style="{color:'#0000FF'}">
                                <Plus />
                              </el-icon>
                            </a>
                            <a :style="{marginRight: '0.5rem'}" @click="remove(node, data)">
                              <el-icon :style="{color:'#DA3434'}">
                                <Delete />
                              </el-icon>
                            </a>
                            <a :style="{marginRight: '0.5rem'}" @click="edit(node,data)">
                              <el-icon :style="{color:'#0000FF'}">
                                <Edit />
                              </el-icon>
                            </a>
                          </span>
                        </span>
                      </template>

                    </el-tree>




/** 树节点id */
let id = 1000;
/** 单击节点的数据 */
const nodeData = ref({});
/** 节点是否修改 */
const isEditing = ref(false);
/** 保存正在编辑的节点ID */
const editingNodeId = ref<number | null>(null);
/** 临时存储编辑中的节点名称 */
const editingNodeLabel = ref<string>("");
/** 树形结构数据 */
const defaultProps = {
  children: "children",
  label: "label"
};

/** 树形结构数据 */
interface Tree {
  [key: string]: any;
}

/** 树形结构数据 */
const data: Tree[] = [
  {
    id: 1,
    label: "基本"
  },
  {
    id: 2,
    label: "属性",
    data: [
      {
        id: 1,
        label: "电池电压"
      },
      {
        id: 2,
        label: "正在充电"
      },
      {
        id: 3,
        label: "固件版本"
      },
      {
        id: 4,
        label: "输入电压"
      },
      {
        id: 5,
        label: "信号质量"
      },
      {
        id: 6,
        label: "位置"
      },
      {
        id: 7,
        label: "服务器地址"
      },
      {
        id: 8,
        label: "服务器用户名"
      },
      {
        id: 9,
        label: "通讯协议"
      },
      {
        id: 11,
        label: "产品令牌"
      },
      {
        id: 12,
        label: "设备令牌"
      }
    ]
  },
  {
    id: 3,
    label: "功能"
  },
  {
    id: 4,
    label: "时间"
  },
  {
    id: 5,
    label: "授权"
  },
  {
    id: 6,
    label: "固件"
  },
  {
    id: 7,
    label: "警报"
  },
  {
    id: 8,
    label: "界面"
  },
  {
    id: 9,
    label: "影子"
  }
];

/** 修改树节点 */
const edit = (node: Node, data: Tree) => {
  isEditing.value = true;
  editingNodeId.value = data.id;
  editingNodeLabel.value = data.label;
};

/** 点击树节点 */
const handleNodeClick = (data: Tree) => {
  nodeData.value = data.data;
};

/** 添加树节点 */
const append = (data: Tree) => {
  const newChild = { id: id++, label: "testtest", children: [] };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
  data.value = [...data.value];
};

/** 删除树节点 */
const remove = (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);
  data.value = [...data.value];
};

/** 更新节点名称 */
const updateNodeLabel = (data: Tree) => {
  if (editingNodeId.value === data.id) {
    data.label = editingNodeLabel.value;
    isEditing.value = false;
    editingNodeId.value = null;
  }
};

/** 取消节点编辑 */
const cancelEdit = () => {
  isEditing.value = false;
  editingNodeId.value = null;
};