elementUI的tree组件自定义内容中 修改节点名称

Question

vue+elementUI 使用tree组件 ，对照文档可以自定义删除和添加按钮。我现在还想添加一个修改按钮 希望点击按钮时可以直接在节点上输入新的名称，点击空白处修改完成，求问大神们怎么做啊

Answer 1

<el-tree
            :data="data"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :render-content="renderContent"
            draggable
          ></el-tree>


      const data = [
      {
        id: 1,
        label: '一级 1',
        IsShow: false,
        children: [
          {
            id: 4,
            label: '二级 1-1',
            IsShow: false,
            children: [
              {
                id: 9,
                label: '三级 1-1-1',
                IsShow: false
              },
              {
                id: 10,
                label: '三级 1-1-2',
                IsShow: false
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: '一级 2',
        IsShow: false
      }
    ]


    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
          <span>
            <el-button
              size='mini'
              type='text'
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size='mini'
              type='text'
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
            <el-button
              size='mini'
              type='text'
              on-click={() => this.alter(node, data)}
            >
              修改
            </el-button>
            {
              data.IsShow ? (
                <span>
                  <el-input
                    placeholder='请输入内容'
                    value={data.label}
                    onInput={ (a) => this.Inp(a, data) }
                    clearable>
                  </el-input>
                </span>
              ) : (
                ''
              )
            }
          </span>
        </span>
      )
    }

          Inp(value, data) {
      data.label = value
    }

            append(data) {
      const newChild = { id: id++, label: 'testtest', children: [], IsShow: false }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    }
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex((d) => d.id === data.id)
      children.splice(index, 1)
    },


        alter(node, data) {
      console.log(node)
      console.log(data)
      data.IsShow = !data.IsShow
    },