优化:没有下级菜单时不要有下一级空菜单,在java端把children属性空值去掉,空集合时去掉字段,
可以用@JsonInclude(Inlcude.NON_EMPTY)注解标注在实体类的属性上,
@TableField(exist =false) @JsonInclude(JsonInclude.Include.NON_EMPTY) private List<CategoryEntity> children;
提交完后返回页面也刷新了,是用到了父子组件。在$message弹窗结束回调$this.emit
接下来要解决的问题是,修改了该vue后,新增是可以用,修改回显就有问题了,应该回显3级

<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.attrGroupId)"
>修改</el-button>
<script>
// 新增 / 修改
addOrUpdateHandle(id) {
// 先显示弹窗
this.addOrUpdateVisible = true;
// .$nextTick(代表渲染结束后再接着执行
this.$nextTick(() => {
// this是attrgroup.vue
// $refs是它里面的所有组件。在本vue里使用的时候,标签里会些ref=""
// addOrUpdate这个组件
// 组件的init(id);方法
this.$refs.addOrUpdate.init(id);
});
},
</script>
在init方法里进行回显
但是分类的id还是不对,应该是用数组封装的路径
init(id) {
this.dataForm.attrGroupId = id || 0;
this.visible = true;
this.$nextTick(() => {
this.$refs["dataForm"].resetFields();
if (this.dataForm.attrGroupId) {
this.$http({
url: this.$http.adornUrl(
`/product/attrgroup/info/${this.dataForm.attrGroupId}`
),
method: "get",
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
this.dataForm.sort = data.attrGroup.sort;
this.dataForm.descript = data.attrGroup.descript;
this.dataForm.icon = data.attrGroup.icon;
this.dataForm.catelogId = data.attrGroup.catelogId;
//查出catelogId的完整路径
this.catelogPath = data.attrGroup.catelogPath;
}
});
}
});
修改AttrGroupEntity
/** * 三级分类修改的时候回显路径 */ @TableField(exist = false) private Long[] catelogPath;
修改controller
/**
* 信息
*/
@RequestMapping("/info/{attrGroupId}")
//@RequiresPermissions("product:attrgroup:info")
public R info(@PathVariable("attrGroupId") Long attrGroupId){
AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);
// 用当前当前分类id查询完整路径并写入 attrGroup
attrGroup.setCatelogPath(categoryService.findCateLogPath(attrGroup.getCatelogId()));
return R.ok().put("attrGroup", attrGroup);
}
添加service
@Override // CategoryServiceImpl
public Long[] findCateLogPath(Long catelogId) {
List<Long> paths = new ArrayList<>();
paths = findParentPath(catelogId, paths);
// 收集的时候是顺序 前端是逆序显示的 所以用集合工具类给它逆序一下
Collections.reverse(paths);
return paths.toArray(new Long[paths.size()]);
}
/**
* 递归收集所有父节点
*/
private List<Long> findParentPath(Long catlogId, List<Long> paths) {
// 1、收集当前节点id
paths.add(catlogId);
CategoryEntity byId = this.getById(catlogId);
if (byId.getParentCid() != 0) {
findParentPath(byId.getParentCid(), paths);
}
return paths;
}