el-button点击新增父节点，弹出dialog,显示el-tree的父节点，保存时调用API，修改，删除等功能代码实现

以下是基于Vue.js和Element UI的代码实现示例：

<template>
  <div>
    <el-button type="primary" @click="handleAddParent">新增父节点</el-button>
    <el-dialog title="添加父节点" :visible.sync="parentDialogVisible" width="30%">
      <el-form :model="parentForm" label-width="100px">
        <el-form-item label="父节点名称">
          <el-input v-model="parentForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="parentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParent">确 定</el-button>
      </div>
    </el-dialog>
    <el-tree :data="treeData" :props="treeProps" :node-key="treeNodeKey" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 树结构数据
      treeProps: { // 树结构props配置
        children: 'children',
        label: 'name'
      },
      treeNodeKey: 'id', // 树节点key
      parentDialogVisible: false, // 添加父节点弹框是否显示
      parentForm: { // 添加父节点表单数据
        name: ''
      },
      currentSelectedNode: null // 当前选中的树节点
    }
  },
  methods: {
    // 点击新增父节点按钮
    handleAddParent() {
      this.parentDialogVisible = true
    },
    // 添加父节点
    addParent() {
      if (!this.parentForm.name) {
        this.$message.error('请输入父节点名称')
        return
      }
      // 调用API保存父节点数据
      // ...

      // 添加新父节点到树结构
      const newParentNode = {
        id: 1, // 通过API返回的新节点ID
        name: this.parentForm.name,
        children: []
      }
      this.treeData.push(newParentNode)
      this.parentDialogVisible = false
      this.$message.success('添加成功')
    },
    // 点击树节点
    handleNodeClick(node) {
      this.currentSelectedNode = node
    },
    // 修改节点名称
    updateNodeName() {
      if (!this.currentSelectedNode) {
        this.$message.error('请选择需要修改的节点')
        return
      }
      // 调用API修改节点名称
      // ...

      this.$message.success('修改成功')
    },
    // 删除节点
    deleteNode() {
      if (!this.currentSelectedNode) {
        this.$message.error('请选择需要删除的节点')
        return
      }
      this.$confirm('确定删除该节点吗?', '提示', {
        type: 'warning'
      }).then(() => {
        // 调用API删除节点
        // ...
        const parentNode = this.currentSelectedNode.parent
        if (parentNode) {
          const siblingNodes = parentNode.children
          const index = siblingNodes.findIndex(node => node.id === this.currentSelectedNode.id)
          siblingNodes.splice(index, 1)
        } else {
          const index = this.treeData.findIndex(node => node.id === this.currentSelectedNode.id)
          this.treeData.splice(index, 1)
        }
        this.currentSelectedNode = null
        this.$message.success('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

以上示例中，我们通过`el-button`和`el-dialog`实现了添加树节点的功能。当用户点击“新增父节点”按钮时，弹出一个对话框，用户输入父节点名称后，点击“确定”按钮，将新节点保存到后端，并添加到树结构中。

另外，我们还实现了修改节点名称和删除节点的功能。当用户点击树节点时，记录下当前选中的节点，在用户点击“修改节点名称”或“删除节点”按钮时，根据当前选中的节点调用API进行相应操作，并更新树结构数据。