Cascader 级联选择器（三级）

业务场景

点击分组id=1修改，获得当前行的所有信息，其中所属分类id是用来控制*所属分类

 这里是通过点击修改按钮获取此时的

一个分类可以有多个属性数组，一个属性分组可以有多个属性

 

 *所属分类这里v-model绑定，调用后端接口得到数据如下

 

后端实现 

 controller层

   @RequestMapping("/info/{attrGroupId}")
    public R info(@PathVariable("attrGroupId") Long attrGroupId){
        System.out.println(attrGroupId);
//        通过groudId找到attrGroup，这是mybatis内置方法
		AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);
        System.out.println(attrGroup);
//		通过attrGroup主体找到对应的catelogId
        Long catelogId = attrGroup.getCatelogId();

        System.out.println(catelogId);
        Long[] path = categoryService.findCatelogPath(catelogId);
        attrGroup.setCatelogPath(path);

        return R.ok().put("attrGroup", attrGroup);
    }

service层

AttrGroupService

package com.atguigu.gulimall.product.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.atguigu.common.utils.PageUtils;
import com.atguigu.gulimall.product.entity.AttrGroupEntity;

import java.util.Map;

/**
 * 属性分组
 *
 * @author maplechen
 * @email [email protected]
 * @date 2021-12-26 12:23:21
 */
public interface AttrGroupService extends IService {

    PageUtils queryPage(Map params);
    PageUtils queryPage(Map params,Long catelogId);
}

Bean层

AttrGroupEntity 

package com.atguigu.gulimall.product.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;

import java.io.Serializable;
import java.util.Date;
import lombok.Data;

/**
 * 属性分组
 * 
 * @author maplechen
 * @email [email protected]
 * @date 2021-12-26 12:23:21
 */
@Data
@TableName("pms_attr_group")
public class AttrGroupEntity implements Serializable {
	private static final long serialVersionUID = 1L;

	/**
	 * 分组id
	 */
	@TableId
	private Long attrGroupId;
	/**
	 * 组名
	 */
	private String attrGroupName;
	/**
	 * 排序
	 */
	private Integer sort;
	/**
	 * 描述
	 */
	private String descript;
	/**
	 * 组图标
	 */
	private String icon;
	/**
	 * 所属分类id
	 */
	private Long catelogId;
    //这里是分类的路径的id，例如 即[3,14,19] 前端渲染为 手机/手机通讯/手机
    //@TableField(exist = false)是数据库中不存在的列
	@TableField(exist = false)
	private Long[] catelogPath;
}

 CategoryEntity

package com.atguigu.gulimall.product.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableLogic;
import com.baomidou.mybatisplus.annotation.TableName;

import java.io.Serializable;
import java.util.Date;
import java.util.List;

import com.fasterxml.jackson.annotation.JsonInclude;
import lombok.Data;

/**
 * 商品三级分类
 * 
 * @author maplechen
 * @email [email protected]
 * @date 2021-12-26 12:23:21
 */
@Data
@TableName("pms_category")
public class CategoryEntity implements Serializable {
	private static final long serialVersionUID = 1L;

	/**
	 * 分类id
	 */
	@TableId
	private Long catId;
	/**
	 * 分类名称
	 */
	private String name;
	/**
	 * 父分类id
	 */
	private Long parentCid;
	/**
	 * 层级
	 */
	private Integer catLevel;
	/**
	 * 是否显示[0-不显示，1显示]
	 */
	@TableLogic(value = "1",delval = "0")
	private Integer showStatus;
	/**
	 * 排序
	 */
	private Integer sort;
	/**
	 * 图标地址
	 */
	private String icon;
	/**
	 * 计量单位
	 */
	private String productUnit;
	/**
	 * 商品数量
	 */
	private Integer productCount;

	@TableField(exist=false)
    /* 不为空时返回的json才带该字段，如果是 手机/手机通讯/手机。第三级（手机）应该没有children这
字段*/
	@JsonInclude(JsonInclude.Include.NON_EMPTY) 
	private List children;

}

CategoryService 

package com.atguigu.gulimall.product.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.atguigu.common.utils.PageUtils;
import com.atguigu.gulimall.product.entity.CategoryEntity;

import java.util.List;
import java.util.Map;

/**
 * 商品三级分类
 *
 * @author maplechen
 * @email [email protected]
 * @date 2021-12-26 12:23:21
 */
public interface CategoryService extends IService {

    PageUtils queryPage(Map params);

    List listWithTree();

    void removeMenuByIds(List asList);

//    找到catelogId完整路径
    Long[] findCatelogPath(Long catelogId);
}

最重要是实现

Long[] path = categoryService.findCatelogPath(catelogId)；

attrGroup.setCatelogPath(path);

return R.ok().put("attrGroup", attrGroup);

 思想：递归

当前第n级分类，查找是否有它的父id

若有则它的父（n-1级）在查找是否是父id

。。。

等到不满足后就退出循环

serviceImpl层

CategoryServiceImpl（核心代码）

  @Override
    public Long[] findCatelogPath(Long catelogId) {

        List paths = new ArrayList<>();
        List parentPath = findParentPath(catelogId, paths);
//        [225, 34, 2]
        Collections.reverse(parentPath);
        System.out.println(parentPath);
        return  parentPath.toArray(new Long[parentPath.size()]);
    }


    private List findParentPath(Long catelogId,List paths){
//        1。收集当前节点id
        paths.add(catelogId);
//当前id对应的分类级别是否有父，如果有则递归
        CategoryEntity byId = this.getById(catelogId);
        if(byId.getParentCid()!=0){
            findParentPath(byId.getParentCid(),paths);
        }
        return paths;
    }

前端实现

核心代码

v-model是用来显示目前得到的级别分类，例如，家用电器/厨房大件/油烟机

:options是显示所有的层级分类，这里涉及到了需要获得所有分类节点

请求后端接口后赋值

catelogPath: [],

this.catelogPath = data.attrGroup.catelogPath;

点击修改，出现的弹框，代码如下