el-tree实现编辑功能

实现el-tree的编辑功能，可以通过以下步骤：

1. 在el-tree的每个节点上添加一个编辑按钮，点击编辑按钮可以进入编辑模式。

<el-tree-node :data="node" :props="defaultProps">
  <span slot-scope="{ node, data }">
    <span>{{ data.name }}</span>
    <el-button type="text" icon="el-icon-edit" @click.stop="editNode(node, data)">编辑</el-button>
  </span>
</el-tree-node>

2. 在vue组件中定义editNode方法，该方法将节点的label设置为可编辑状态。

methods: {
  editNode(node, data) {
    this.$nextTick(() => {
      const label = node.$el.querySelector('.el-tree-node__label')
      label.setAttribute('contenteditable', true)
      label.focus()
      label.addEventListener('blur', () => {
        label.setAttribute('contenteditable', false)
        label.removeEventListener('blur')
        if (label.innerText.trim()) {
          data.name = label.innerText.trim()
          this.updateNode(data)
        }
      })
    })
  },
  updateNode(data) {
    axios.put('/api/updateNode', { id: data.id, name: data.name }).then(res => {
      if (res.data.success) {
        this.$message.success('更新成功')
      } else {
        this.$message.error('更新失败')
      }
    })
  }
}

3. 当用户编辑完节点名称后，将节点的label设置为不可编辑状态，并将编辑后的名称保存到数据库中。

以上是el-tree实现编辑功能的代码实现。需要注意的是，当用户编辑节点名称时，需要将el-tree节点的label设置为可编辑状态，并在编辑完成后将其设置为不可编辑状态，否则会影响其他节点的编辑。另外，需要根据具体的业务场景进行调整和优化。