目录
一、总述
二、前端实现
三、后端实现
四、总结
一、总述
本次就是一个小的优化。
就是分组新增或者是修改的时候，直接显示商品分类的id可读性不高，新增的时候需要填写对商品分类的id，修改的时候，就只是给你一个商品分类的数字，并不能直接显示到底是什么分类。
那有什么办法可以解决这个问题呢？
elementUI中的级联选择器可以解决这个问题。
二、前端实现
前端这里就是一个级联选择器这个组件的使用，翻阅文档，知道哪些参数，如何配置就行了
下图是elementUI中的级联选择器：
复制这个直接到我们的分组组件中，在新增/删除对话框那里，将所属分类id下面的内容进行替换
在数据域中声明好相关的属性：
需要正确将分类数据显示出来的话，就需要在页面打开的时候就获取到分类数据，放到categorys中：
通过上述步骤，基本上就能显示了 ，但是会出现最后一级的分类是空的情况，这是由于这个级联组件可不管你的children集合里面没有元素，只要存在这个就渲染，空的也渲染，只是显示空白，没有数据罢了。
那么需要怎么办呢？
其实很简单，就是将后端返回的对应的那个实体类，在children字段上面加上注解，加上：
@JsonInclude(JsonInclude.Include.NON_EMPTY) 
代表一但为空的话，这里的为空空集合也包括了，就不将这个字段以json返回给前端。
到现在的话，在新增的时候就能级联显示分类信息了：
当然这里选择的话，最终给我们的数据是，从父到孙的分类id数组，而我们最终提交的时候，只需要提交最后一级的分类id就行了，因此需要在提交之前做一下处理，修改表单中的绑定的分类值：
那修改的时候，怎样还以这种级联的方式进行回显呢？
其实很简单，我们知道刚刚选择了最终我们得到的数据是"父-子-孙"的分类id数组，反正有这个数据，级联组件就能正确的进行显示。
那么现在思路其实就已经出来了，就是点击修改按钮的时候，前端肯定要向后端请求分组数据，只需要分组数据中携带好分类id的完整路径即可，然后将这个完整路径设置给数据域中的categoryIds，又因为这个categoryIds和级联组件进行了绑定，因此此时级联组件就能按照这个路径进行级联显示了。
所以现在只需要在后端携带好这个路径，然后在前端绑定好就行了。
后端携带这个路径是后端的事情，在后端实现中进行说明，现在直接说一下绑定：
三、后端实现
在新增分组信息的后端没什么好说的，都不需要修改什么。
只是这个修改分组时因为需要将分类信息以级联的方式进行回显，而级联回显依赖的是分类路径。
所以这里后端主要是对分类信息获取接口改进一下，就是新增一个分类路径进行返回
1. controller
2. service
service接口：
public interface IAttrGroupService extends IService<AttrGroup> {
AttrGroupVo getDetailGroup(Long attrGroupId);
}service实现：
@Service
public class AttrGroupServiceImpl extends ServiceImpl<AttrGroupMapper, AttrGroup> implements IAttrGroupService {
@Autowired
private ICategoryService categoryService;
@Override
public AttrGroupVo getDetailGroup(Long attrGroupId) {
AttrGroup group = getById(attrGroupId);
AttrGroupVo attrGroupVo = new AttrGroupVo();
BeanUtils.copyProperties(group,attrGroupVo);
Long[] path = categoryService.categoryPath(group.getCatelogId());
attrGroupVo.setCategoryPath(path);
return attrGroupVo;
}
}这是分组这里，主要还是分类那里通过分类id获取其完整路径的核心方法：
service：
接口：
实现：
文章来源：https://www.toymoban.com/news/detail-630295.html
@Override
public Long[] categoryPath(Long categoryId) {
List<Long> path = new ArrayList<>();
List<Long> categoryPath = path(categoryId, path);
Collections.reverse(categoryPath);
return categoryPath.toArray(new Long[categoryPath.size()]);
}
private List<Long> path(Long categoryId,List<Long> path){
path.add(categoryId);
Category category = getById(categoryId);
Long parentCid = category.getParentCid();
if(parentCid!=0){
path(parentCid,path);
}
return path;
}四、总结
前端的话就是一个级联组件的使用，后端的话主要是分类路径的获取文章来源地址https://www.toymoban.com/news/detail-630295.html
到了这里，关于谷粒商城第十天-分组新增级联显示商品分类&分组修改级联回显商品分类的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
