一、后端实现

1、重写删除业务逻辑

参考Teacher模块

2、api 接口

参考Teacher模块

二、前端实现

1、准备

安装Chrome插件 Vue.js devtools

参考Element-UI Tree组件

2、api

参考Teacher模块

3、组件模板

   <el-tree
      ref="subjectTree"
      :data="subjectList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      class="filter-tree"
      default-expand-all
      node-key="id">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <!-- 使用Chrome的Vue插件调试 -->
          <el-button
            v-if="node.level == 1"
            type="text"
            size="mini"
            @click="() => append(data)">添加</el-button>
          <el-button
            v-if="node.level == 2"
            type="text"
            size="mini"
            @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>

3、组件代码

添加remove方法

remove(node, data) {
    console.log(node)
    console.log(data)

    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return subject.removeById(data.id)
    }).then(() => {
        // this.fetchNodeList()// 刷新列表
        this.$refs.subjectTree.remove(node) // 删除节点（效率高）
        this.$message({
            type: 'success',
            message: '删除成功!'
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
    })
},