Vue3 使用element plus的Tree树型控件嵌套input输入框

element官网上的树型控件自定义节点内容部分只有删除和添加结点，但是我想修改其中的某一条结点。一开始的想法是在每个结点后面都加一个编辑按钮，点击后弹一个对话框，对话框里写一个输入框修改。但后面想想每次都弹一个对话框的话用户体验太差了，于是就想到了直接在树型控件中嵌入输入框修改内容的方法，效果如下。

1.引入 （nextTick用于等待DOM更新）

import { ref } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { nextTick } from 'vue'

2.模板内容（大部分跟官网一样，只加了编辑按钮和输入框，主要加了v-if和v-else的判断）

<template>
  <div class="custom-tree-container">
    <el-tree
      style="max-width: 600px"
      :data="dataSource"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span v-if="node.label">{
  
  { node.label }}</span>
          <span v-else><el-input v-model=