vue+element-ui树状控件批量删除后新增出现BUG，好奇怪
Mysql单表查询商品三级分类数据，数据缺失，后台到数据是无异常的，前端数据不显示
前端：vue3+Element-UI
后端：SpringCloud 2020.0.4+SpringBoot2.5.5+MyBatis-Plus3.3.1
在练手商品三级分类的CURD时，遇到了描述问题：
- 批量删除了 **手机通信 **整个节点，【现在这个是我后面新增的】
- 删除之后，我在重新添加了 手机通信 二级节点，在继续往 手机通信 节点中添加子节点，数据库中有新增子节点数据产生，前端刷新请求获取最新节点数据，没有刚加的节点，在其他节点下面加子节点是正常显示的
- 发请求到后端，发现 手机通信 二级节点下的子节点也是为NULL，但是其他二级节点都是正常递归封装的呀，很是头疼。
//使用自带的方法获取到全部的商品分类数据，在递归封装
baseMapper.selectList(null);
相关的一些前端代码
<template>
<div>
<div><h1>三级商品类别管理</h1></div>
<br />
<el-switch
v-model="draggable"
active-text="开启拖拽"
inactive-text="关闭拖拽"
>
</el-switch>
<el-button
v-if="draggable"
type="primary"
size="small"
@click="batchUpdateNodes"
round
>批量保存</el-button
>
<el-button type="danger" size="small" @click="batchRemoveNodes" round
>批量删除</el-button
>
<br />
<!-- :default-expanded-keys="expandedKeys" 节点默认展开
:draggable="true" 开启拖拽节点功能
show-checkbox 节点可被选择
:allow-drop 拖拽时判定目标节点能否被放置
@node-drop="handleDrop" 拖拽成功完成时触发的事件
-->
<el-tree
:data="menus"
:props="defaultProps"
:expand-on-click-node="false"
show-checkbox
node-key="catId"
:default-expanded-keys="expandedKeys"
:draggable="draggable"
:allow-drop="allowDrop"
@node-drop="handleDrop"
ref="menuTree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
v-if="node.level <= 2"
type="text"
size="mini"
@click="() => append(data)"
>
新增
</el-button>
<el-button type="text" size="mini" @click="() => edit(data)">
修改
</el-button>
<el-button
v-if="node.childNodes.length == 0"
style="color: red"
type="text"
size="mini"
@click="() => remove(node, data)"
>
删除
</el-button>
</span>
</span>
</el-tree>
<!-- 新增商品对话框 -->
<el-dialog :title="titleName" :visible.sync="dialogFormVisible">
<el-form :model="category">
<el-form-item label="商品类别名称">
<el-input v-model="category.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="图标地址">
<el-input v-model="category.icon" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="计量单位">
<el-input
v-model="category.productUnit"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitCategory">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
curNodeParentCid: [],
draggable: false,
updateNodes: [],
maxLevel: 0,
menus: [],
category: {
catId: "",
name: "",
parentCid: 0,
showStatus: 1,
catLevel: 0,
sort: 0,
productUnit: null,
icon: null,
},
// 请求类型 新增、修改
dislogType: "",
titleName: "",
dialogFormVisible: false,
expandedKeys: [],
catId: [],
defaultProps: {
children: "children",
label: "name",
},
};
},
components: {},
computed: {},
created() {
this.getCategoryList();
},
methods: {
// 获取数据列表 商品列表类别
getCategoryList() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(({ data }) => {
console.log(data);
this.menus = data.entities;
});
},
// 批量删除商品类别
batchRemoveNodes() {
// getCheckedNodes() =》若节点可被选择，则返回目前被选中的节点所组成的数组
// (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
// 1. leafOnly： 是否只是叶子节点，默认值为 false
// 2. includeHalfChecked： 是否包含半选节点，默认值为 false
var data = this.$refs.menuTree.getCheckedNodes();
console.log("当前被选中的节点：", data);
for (let i = 0; i < data.length; i++) {
this.catId.push(data[i].catId);
}
this.$confirm(`此操作将永久删除商品类别, 是否继续?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$http({
url: this.$http.adornUrl("/product/category/delete"),
method: "post",
data: this.$http.adornData(this.catId, false),
}).then(({ data }) => {
this.$message({
message: "恭喜你，商品类别批量删除成功！",
type: "success",
});
//删除完当前节点类别，刷新界面，调用获取商品类别方法
this.getCategoryList();
//删除当前节点后，保持当前树状展开效果，node.parent.data.catId 为删除当前节点的父节点 catId 唯一标识
this.expandedKeys = this.catId;
});
})
.catch(() => {});
},
// 商品对话框 点击确认调用方法， 判断dislogType的值调用对象的 修改/新增 方法
submitCategory() {
if (this.dislogType == "add") {
this.addCategory();
}
if (this.dislogType == "edit") {
this.editCategory();
}
},
// 添加商品类别 弹出表单输入商品类别信息
append(data) {
console.log("新增类别", data);
this.dislogType = "add";
this.titleName = "新增商品类别";
this.dialogFormVisible = true;
this.category.catLevel = data.catLevel * 1 + 1;
this.category.parentCid = data.catId;
this.category.productUnit = "";
this.category.icon = "";
this.category.name = "";
// this.category.catLevel = 0;
},
// 添加商品类别
addCategory() {
console.log(this.category);
this.$http({
url: this.$http.adornUrl("/product/category/save"),
method: "post",
data: this.$http.adornData(this.category, false),
}).then(({ data }) => {
this.$message({
message: "恭喜你，商品类别新增成功！",
type: "success",
});
// 关闭 商品新增类别对话框
this.dialogFormVisible = false;
// 新增成功,刷新商品类别
this.getCategoryList();
// 保持当前父字节的展开
this.expandedKeys = [this.category.parentCid];
});
},
remove(node, data) {
var ids = [data.catId];
console.log("删除", node, data);
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.getCategoryList();
//删除当前节点后，保持当前树状展开效果，node.parent.data.catId 为删除当前节点的父节点 catId 唯一标识
this.expandedKeys = [node.parent.data.catId];
});
})
.catch(() => {});
},
},
};
</script>
现在真的是一头雾水~
数据库中加入了，前端请求是不是，获取到了呢？
getCategoryList 看下这个接口返回的数据是否有新添加的三级数据，接口没返回表示后台返回数据问题，如果返回了，再看看 { children: [], label: "xxxxx"}是否是这个结构。