Cascader 级联选择器使用

1、后端准备数据

  1.1TbItemCat实体类参数：

/** 类目编号 */
private Long id;

/** 父类目编号 */
private Long parentId;

/** 类目名称 */
private String name;

/** 模版编号 */
private Long typeId;

/** 子集合 */
private List<TbItemCat> children;

1.2后端接口：

//查询所有数据
List<TbItemCat> list = tbItemCatService.selectTbItemCatList(null);
//1、把所有一级分类装入一个集合
//2、把所有对象装到父级的children集合里
Map<Long,TbItemCat> map = new HashMap<>();
//1200次
for(TbItemCat itemCat : list){
    map.put(itemCat.getId(), itemCat);
}
List result = new ArrayList();
for(TbItemCat itemCat : list){
    if(itemCat.getParentId()==0){
        //一级分类
        result.add(itemCat);
    }else{
        //不是一级，装入父级对象的children集合里
        Long parentId = itemCat.getParentId();
        TbItemCat parent = map.get(parentId);
        List<TbItemCat> children = parent.getChildren();
        //如果第一次存入，则开辟空间
        if(children == null){
            children = new ArrayList<>();
            parent.setChildren(children);
        }
        children.add(itemCat);
    }
}
return  result;

2、前端

<el-cascader
  style="width: 40%"
  v-model="value"
  :options="options"
  :props="{'label':'name','value':'id'}"
></el-cascader>

3、最终效果