分布式项目-三级分类管理（2）_三级分类为什么只有叶子节点才有删除功能-优快云博客

本文链接：https://blog.youkuaiyun.com/fuyuanduan/article/details/128930619

文章详细介绍了在ElementUI组件库中处理树形结构数据的添加、删除功能，包括防止下级内容自动展开的解决方案，以及如何控制不同级别的添加按钮。同时，提出了利用MyBatisPlus实现逻辑删除，通过状态字段避免实际数据的永久丢失。在前端，使用HTTPPOST请求提交删除操作，并更新页面数据。然而，删除后需手动恢复展开的节点状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【删除数据】：

【BUG1】:

ElementUI中，原生写法，点击 “增加”/“删除” ，下一级的内容会自动展开。
在这里插入图片描述
在标签上添加属性：

    <el-tree 
      :expand-on-click-node="false"
    >

【控制级数】:

在这里插入图片描述
一级、二级有《添加》按钮，三级没有 ;

<el-button
            v-if="data.catLevel <= 2"
            type="text"
            size="mini"
            @click="() => append(data)">
            添加
</el-button>

【删除按钮控制】：

没有childrens的情况，才会显示《删除》按钮。
在这里插入图片描述

 <el-button
            v-if = "data.childrens.length == 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
</el-button>

在这里插入图片描述

【勾选框】：

在这里插入图片描述

<el-tree 
           show-checkbox
>

【node-key】：

node-key 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的。

    <el-tree 
      node-key="catId"
    >

【delete方法测试】：

在这里插入图片描述
点击《Send》按钮。

//这个方法是真的从数据库中删除，但是如果我后悔了就无法进行找回了。
这时候我们就要通过表结构中的状态去进行控制，比如status字段。

【利用MyBatisPlus自动实现显隐】：

实体类显隐字段上加注解：

	/**
	 * 是否显示[ 0不显示 , 1显示 ]
	 */
	@TableLogic(value = "1",delval = "0")
	private Integer showStatus;

修改YML配置文件：

 mybatis-plus:
  global-config:
    db-config:
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

ServiceImpl内容：

    @Override
    public  void removeCategoryByIds(List<Long> ids) {
        //TODO [1]:检查类别数据是否在其他业务中使用。

        //批量逻辑删除操作：
        baseMapper.deleteBatchIds(ids);
    }

【提示框】：

${}
一定是用反单引号啊！不要写成单引号了！！
可以代替 ‘’ 和 “”
在 `` 中可以使用 ${} 直接把变量和字符串拼接起来

1、反单引号怎么打出来？
将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

2、用法
step1：定义需要拼接进去的字符串变量
step2：将字符串变量用${}包起来，再写到需要拼接的地方。
在这里插入图片描述

【BUG2】:


 //把删除的请求提交到后台服务。
          this.$http({
            url: this.$http.adornUrl('/product/category/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
              })
                this.getCategory();
            } else {
              this.$message.error(data.msg)
            }
          });


      getCategory(){
          this.$http({
            url:this.$http.adornUrl('/product/category/listTree'),
            method:'get'
          }).then(({data})=>{
            console.log( "成功获取的类别数据 ： " , data.data )
            this.data = data.data;
          })
      }

!!!——但是，问题是我执行了删除操作之后，整个的页面又回到了原先一开始的状态（并没有恢复到展开的那种状态）。
//也就是说我删除了之后，还得重新再打开所有的层级目录。

				this.getCategory();
                 //设置默认展开的父节点信息
                this.expandKeys=[node.parent.data.catId]