element el-tree组件的动态加载、新增、更新节点的实现

首先我们需要了解一下element el-tree组件的基本结构和属性：

<el-tree :data="data"
         :load="load"
         :props="defaultProps"
         @node-click="handleNodeClick">
</el-tree>

其中，:data是el-tree组件的数据源，:load是el-tree组件的动态加载函数，:props是el-tree组件的配置项，@node-click是el-tree组件的节点点击事件。

下面，针对题目中提到的三个点来逐一进行讲解：

动态加载节点

动态加载节点是指当用户点击某个节点时，其子节点才会在组件中生成并显示出来。这个功能实际上是通过上文提到的:load属性来实现的。

我们需要在:load属性中传入一个函数，这个函数应该接受三个参数：node、resolve和reject。其中，node表示当前点击的节点，resolve表示子节点数据请求成功后的回调函数，reject表示子节点数据请求失败后的回调函数。

下面是一个示例：

loadNode(node, resolve) {
  // 异步请求子节点数据
  axios.get('/getChildren', {
    params: {
      id: node.id
    }
  }).then(res => {
    // 将子节点数据挂载到点击的节点上
    node.children = res.data
    // 调用resolve回调
    resolve()
  }).catch(error => {
    // 调用reject回调
    reject(error)
  })
}

新增节点

新增节点一般需要在节点的上方或者下方显示一个操作按钮（如“新增节点”），用户点击按钮后弹出添加节点的弹窗，用户填写节点数据并保存后就可以在当前节点的上下生成一个新节点了。

我们需要在@node-click事件中判断当前点击的节点是哪个，然后在相应的地方显示新增节点的操作按钮。当用户点击操作按钮时，则要打开添加节点的弹窗。用户填写完数据后，我们需要通过API将新增节点数据发送到后台。等到服务器返回数据后，我们需要手动在当前节点的上下添加新节点，以完成页面视图的更新。

以下代码展示了如何实现在当前节点下方添加新节点：

handleAddNode(node) {
  // 生成新节点
  const newNode = {
    id: generateId(),
    label: '新建节点',
    children: []
  }
  // 手动添加新节点
  node.children.push(newNode)
  // 展开父节点，以便新节点展示出来
  node.expanded = true
}

注意，这里的generateId()函数是根据业务需求自行编写的，其作用是生成一个唯一的节点ID。

更新节点

更新节点和新增节点类似，也需要在节点上方或者下方显示一个操作按钮（如“编辑”），用户点击按钮后弹出编辑节点的弹窗，用户修改数据并保存后就可以将节点的数据更新到服务器上并完成页面视图的更新。

以下代码展示了如何实现更新节点功能：

handleEditNode(node) {
  // 弹出编辑弹窗，供用户填写数据
  // ...
  // 提交编辑后的数据到服务器
  axios.put('/updateNode', { id: node.id, label: node.label }).then(res => {
    // 更新成功，无需做任何操作
  }).catch(error => {
    // 更新失败，手动恢复节点的数据
    node.label = node.label_backup
  })
}

注意，这里的label_backup是节点上一次成功保存的标签数据，在更新节点数据时需要备份一下，以防更新失败需要恢复节点的数据。

希望以上攻略能够对你有所帮助！