vue中el-tree增刪改節點後重新刷新data

• 使用的是element-ui的組件el-tree

<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <a-button type="primary" icon="plus" @click="$refs.edit.showAdd()">添加部門信息</a-button>
      <el-tree
        class="el-tree-margin"
        highlight-current
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :data="treeData"
        @node-click="handleAdd">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.lable }}</span>
          <span>
            <a
              type="text"
              size="mini"
              @click="() => editDepartment(data)">
              修改
            </a>
          </span>
        </span>
      </el-tree>
      <edit ref="edit" @success="initTreeData"></edit><!--這個@success很重要->
    </a-card>
  </div>
</template>

• 當編輯部門（增加部門同理）的時候，點擊修改會觸發editDepartment（）方法，這個方法是調出一個部門的編輯界面。

editDepartment (data) {
      getDepartmentById(data.id).then(res => {
        this.$refs.edit.showEdit(res.data.data[0])
      })
    }

• 當修改成功之後要觸發一個success事件

updateDepartment(req).then(res => {
               if (res.httpStatus === 200) {
                  this.$message.success('修改部門信息成功！')
                  this.visible = false
                  this.curItem = {}
                  this.$emit('success', true)//就是這一行，至關重要！！！
               }
            })

• 這個sueecss事件會讓el-tree下面的edit中的@success事件，從而調用initTreeData方法

initTreeData () {
      //設置新的treeData的值
    },

大功告成！！！