el-tree新增、编辑、删除节点后如何做到局部刷新el-tree

前提需要： 

• 这里新增、编辑、删除都和el-tree是分开的，所以获取node之类的都需要单独获取。
• 其中新增与编辑，因为不是懒加载的tree树，小编与后端协调后决定，新增与编辑成功后，接口会返回当前新增或编辑的数据，及其子节点， 如：

•  这是在新增后，后端返回接口的接口，例如：在产品下新增产品经理。
• 如果是在编辑有子节点的数据时，就会返回与图相同的数据。
• 如果编辑没有子级节点的数据，就会返回：

 

问题还原图：

问题描述：

• 在新增、编辑、删除时，只刷新当前修改的节点，不刷新整个tree树。
• 新增与编辑都需要借助后端同事的帮助，而删除则是前端逻辑实现。
• 但都是需要发送请求的哦！这样才能保证是最新的数据哦！！

解决方法：

• 删除功能 ：

思路：

通过找到要删除父节点的所有数据，再通过相同的id用 .splice(index, 1) 删除节点。

代码：

• methods中

// 接口返回200后才开始删除
if (res.code === 200) {
  // 获取当前被选中节点的 key，必须设置 node-key 属性
  const nodeId = this.$refs.tree.getCurrentKey()
  // 根据 data 或者 key 拿到 Tree 组件中的 node
  const node = this.$refs.tree.getNode(nodeId)
  // 找到相同的id
  const parent = node.parent
  const children = parent.data.children || parent.data
  const index = children.findIndex(d => d.id === node.data.id)
  // 删除
  children.splice(index, 1)
}

• 新增功能 与 编辑功能 ：

思路：

• 这里都用编辑为例
• 首先，点击新增或编辑时会弹出弹框 this.dialogVisible =  true （这里编辑与新增用的同一个弹框）
• 点击tree树时通过 @node-click="getTreeChildren" 获取 recordNode 
• 按照正常的逻辑走，点击确定后触发 @close="close" 关闭弹框并触发 @editorSuccess="editorSuccess" 方法实现局部刷新。

代码：

• html中代码：

<el-dialog
  v-if="dialogVisible"
  :title="dialogTitle"
  :visible.sync="dialogVisible"
>
  <organizationDialog
    :is="pathOrganization"
    ref="add"
    :echo="echo"
    :dialog-title="dialogTitle"
    :organization-name="organizationName"
    :folder-id="folderId"
    @close="close"
    @editorSuccess="editorSuccess"
    @addSuccess="addSuccess"
  />
</el-dialog>

 

• methods中： 

        点击树获取到 recordNode 

// 点击树
getTreeChildren(node, treeNode) {
  console.log('recordNode', node, treeNode)
  recordNode = treeNode
}

         此时 node 与 recordNode  的打印结果：

        编辑成功后触发： 

editorSuccess() {
  var formData = this.$refs.add.setEditorData
  recordNode.setData({
    id: formData.id,
    name: formData.name,
    organizationNo: formData.organizationNo,
    parentId: formData.parentId,
    parentName: formData.parentName,
    children: formData.children
  })
},

this.$refs.add.setEditorData  -----  是接口发送成功后，后端返回的data，为对象。

recordNode.setData（{}）中的内容是小编发送的数据的内容，同时后端的返回中有这些。

 

 

• 弹框的methods中，点击确定后，发送请求接口返回200 ：

if ( res.code === 200 ) {
  this.setEditorData = res.data
  this.$emit('editorSuccess')
  this.$emit('close')
}

 总结：

@node-click：节点被点击时的回调，有三个参数

• 传递给 data 属性的数组中该节点所对应的对象
• 节点对应的 Node
• 节点组件本身

.setData()：在节点对应的 Node 中的 Prototype  中自带的一个方法

• 用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
• 这个方法小编没找到在vue中具体的用法，但可以参考这位大神的文章：微信小程序————setData()方法的使用和注意事项_执生的博客-CSDN博客_setdata