Tree树形控件--删除分级菜单中的某一个、删除后的树形结构仍然是对应目录下的展开效果、二次删除确认、删除成功提示

前言

这里只是提供一种思路、没有提供完整的代码，只给出了部分代码，对新手不友好（日常记录）

实现流程

步骤：

• 1、点击某一级菜单的删除按钮
• 2、获取到改节点的信息
• 3、传输到后台，根据传递的节点ID删除对应信息
• 4、后端封装好查询的树形结构数据
• 5、前端回显。

default-expanded-keys 默认展开的节点的 key 的数组 array。可以实现删除后依然展示对应删除菜单目录

代码实现

这里给出删除的方法，主要是要获取到要删除节点的ID。关于如何将数据组装成树形结构，这里需要后台对查询的数据进行处理封装为前台可以用的。

    remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            //刷新出新的菜单
            this.getMenus();
            //设置需要默认展开的菜单
            this.expandedKey = [node.parent.data.catId];
          });
        })
        .catch(() => {});

      console.log("remove", node, data);
    },

实现效果

选择要删除的选项

提示是否删除

删除成功提示

后台数据库数据