vue封装一个有外部按钮新增同级和下级，修改，能编辑节点内容的el-tree组件

vue封装一个有外部按钮新增同级和下级，修改，能编辑节点内容的el-tree组件

<template>
  <div>
    <el-button type="primary" @click="addSibling">新增同级</el-button>
    <el-button type="primary" @click="addChild">新增下级</el-button>
    <el-button type="primary" @click="editNode">修改</el-button>
    <el-tree :data="treeData" :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">{{ data.label }}</span>
    </el-tree>
    <el-dialog v-model="dialogVisible">
      <el-form ref="nodeForm" :model="nodeForm" label-width="80px">
        <el-form-item label="节点名称">
          <el-input v-model="nodeForm.label"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveNode">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EditableTree',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: false,
      nodeForm: {
        label: ''
      },
      currentNode: null
    }
  },
  methods: {
    addSibling() {
      // 获取当前节点的父节点
      const parent = this.currentNode.parent;
      // 在父节点的children数组中添加一个新节点
      parent.children.push({
        label: '新同级节点'
      });
    },
    addChild() {
      this.currentNode.children.push({
        label: '新下级节点'
      });
    },
    editNode() {
      this.nodeForm.label = this.currentNode.label;
      this.dialogVisible = true;
    },
    saveNode() {
      this.currentNode.label = this.nodeForm.label;
      this.dialogVisible = false;
    },
    handleNodeClick(data, node) {
      this.currentNode = node;
    }
  }
};
</script>