一：页面效果

1.打开elementUI官网

https://element.eleme.cn/#/zh-CN/component/tree

复制tree组件相关代码

<template>
  <div>
    <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId">
       <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini"  @click="() => append(data)" v-if="node.level<=2">Append</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)" v-if="node.childNodes.length == 0">Delete</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 获取三级菜单数据
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    },
    /**
     * 添加节点
     */
    append(data) {
      console.log("append",data);
    },
    /**
     * 移除节点
     */
    remove(node, data) {
      console.log("remove",node,data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

2.说明

1）slot-scope=“{ node, data }”
node表示的是节点信息，data表示节点数据
2）v-if=“node.level<=2”
菜单只有三级，所以只要字节点处于一级或者二级，就可以进行添加菜单。
3）v-if=“node.childNodes.length == 0”
因为子节点是一个数组，所以当子节点的数组长度为0时，就显示删除菜单
4）:expand-on-click-node=“false”
当为false时，只有点击箭头才会下拉下级菜单

5）show-checkbox
添加选择框,实现批量删除功能

6）node-key=“id”
每颗树节点用来作为唯一标识，整棵树是唯一的

二：后台接口实现

1.打开CategoryController文件

• @RequestBody:获取请求体，只有post请求才会发送请求体，必须发送post请求
• SpringMVC会自动将请求体的数据(json),转化为对应的对象

/**
     * 删除
     * @RequestBody:获取请求体，只有post请求才会发送请求体，必须发送post请求
     * SpringMVC会自动将请求体的数据(json),转化为对应的对象
     */
    @RequestMapping("/delete")
    //@RequiresPermissions("product:category:delete")
    public R delete(@RequestBody Long[] catIds){
		categoryService.removeByIds(Arrays.asList(catIds));
        return R.ok();
    }

2.使用postman进行接口测试

post请求

localhost:88/api/product/category/delete

请求发送成功，接口没问题！！！

3.接口功能完善

1）在CategoryController添加delete方法

/**
 * 删除
 * @RequestBody:获取请求体，只有post请求才会发送请求体，必须发送post请求
 * SpringMVC会自动将请求体的数据(json),转化为对应的对象
 */
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
    //1.检查当前删除的菜单,是否被别的地方调用
	categoryService.removeMenuByIds(Arrays.asList(catIds));
    return R.ok();
}

2）在CategoryService添加removeMenuByIds方法

/**
     * 多选删除菜单
     * @param asList
     */
    void removeMenuByIds(List<Long> asList);

3）在CategoryServiceImpl实现removeMenuByIds方法

   /**
     * 批量删除
     * @param asList
     */
    @Override
    public void removeMenuByIds(List<Long> asList) {
         //todo  1.检查当前删除的菜单,是否被别的地方调用

         //逻辑删除
         baseMapper.deleteBatchIds(asList);
    }

4.逻辑删除

1）配置全局的逻辑删除规则
在application.yml加入配置

#mybatis-plus映射位置
#classpath*，表示扫描本微服务和其他微服务
mybatis-plus:
  mapper-locations: classpath*:/mapper/**/*.xml
#设置id主键自增
  global-config:
    db-config:
      id-type: auto
      #逻辑删除
      logic-delete-value: 1   # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

2）给CategoryEntity实体类加上逻辑删除注解@TableLogic

/**
	 * 是否显示[0-不显示，1显示]
	 * @TableLogic:代表这是一个逻辑删除字段
	 */
	@TableLogic(value = "1",delval = "0")
	private Integer showStatus;

3）给application.yml文件添加debug日志配置

#debug日志
logging:
  level: 
    com.sysg.gulimail: debug

4）用postman测试以后打印sql
localhost:88/api/product/category/delete

UPDATE pms_category SET show_status=0 WHERE cat_id IN ( 1431 )

修改成功！！！

三：前端功能实现

1.在category.vue中添加remove方法

/**
     * 移除节点
     */
    remove(node, data) {
      var ids = [data.catId];
      this.$http({
            url: this.$http.adornUrl('/product/category/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            //刷新页面
            this.getMenus();
          })
      console.log("remove",node,data);
    },

点击delete按钮，删除成功

2.在删除之前弹框提示

  /**
     * 移除节点
     */
    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.getMenus();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }); 
    },

3.在删除之前弹框提示

在回调函数中添加执行成功函数

          this.$message({
            message: '菜单删除成功',
            type: 'success'
          });

4.删除成功后继续打开子节点，而不是折叠起来

1）在el-tree标签中添加**:default-expanded-keys = “expandedKey”**
expandedKey表示默认展开的数组
2）在data数据绑定中添加expandedKey:[],
3）在删除成功的方法里为expandedKey赋值，取要删除节点的父节点赋值给expandedKey。

//设置出需要默认展开的菜单
this.expandedKey = [node.parent.data.catId];

4）category.vue所有方法

<template>
  <div>
    <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys = "expandedKey"
    show-checkbox node-key="catId">
       <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini"  @click="() => append(data)" v-if="node.level<=2">Append</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)" v-if="node.childNodes.length == 0">Delete</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      //默认展开的数组
      expandedKey:[],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 获取三级菜单数据
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    },
    /**
     * 添加节点
     */
    append(data) {
      console.log("append",data);
    },
    /**
     * 移除节点
     */
    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(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }); 
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    /**
     * 加载页面的时候查询三级菜单
     */
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

5.把逻辑删除的菜单恢复出来

update pms_category set show_status = 1

四：批量删除功能实现

1.添加批量删除按钮

<el-button type="danger" @click="batchDelete">危险按钮</el-button>

2.获取当前选中的节点

1）getCheckedNodes

• 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
• (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
  2）在el-tree中添加ref = “menuTree”，用来选中tree中的所有组件
  3）添加batchDelete批量删除方法

 /**
     * 批量删除方法
     */
    batchDelete(){
      let catIds = [];
       let checkedNodes = this.$refs.menuTree.getCheckedNodes();
       for(let i = 0 ; i < checkedNodes.length ; i ++){
           let catId = checkedNodes[i].catId;
           catIds.push(catId);
       }
       //发送post请求提交删除的id
      this.$confirm(`是否批量删除菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(catIds, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            //刷新页面
            this.getMenus();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },