基于element实现级连选择，后台处理数据

效果展示

1.后台代码

1.1TreeItemUtil工具类

package wang.stardream.modules.item.util;
import lombok.Data;
import java.util.List;
@Data
public class TreeItemUtil {
    private String id;
    private String parentId;
    private String name;
    private List children;
}

说明：a.@Data Lomok插件所带注解，Lombok是一个Java库，能自动插入编辑器并构建工具，简化Java开发。通过添加注解的方式，不需要为类编写getter或eques方法，同时可以自动化日志变量。

b.参数数据类型可根据数据库对应实体类类型进行定义（自己踩过的坑，也不太清楚为什么，进行类型转换就会出错）

1.2接口编写

public R categoryList(){
    //数据查询
    List cateList=categoryService.getListAll();
    //转换成节点
    List allCategory = cateList.stream()
            .map(CategoryEntity::categoryEntity)
            .collect(Collectors.toList());
    //按上级类目分组
    Map> categoryMap = allCategory.stream()
            .collect(Collectors.groupingBy(TreeItemUtil::getParentId));
    //给每个类目绑定子类目
    allCategory.forEach(node ->
            node.setChildren(categoryMap.get(node.getId()))
    );
    List treeItem = categoryMap.get("0");
    //BFS辅助队列
    List queue = new ArrayList<>();
    queue.addAll(treeItem);
    for (int i = 0; i < queue.size(); i++) {
        TreeItemUtil node = queue.get(i);
        //遍历时先将子类目放入队列中
        if (node.getChildren() != null) {
            queue.addAll(node.getChildren());
        } else {
            node.setChildren(new ArrayList<>());
        }
    }
    return R.ok().put("cateList",treeItem);
}

说明：数据处理的操作，运用了jdk1.8新特性

最后只需要返回treeItem这个集合就可以了，这个数据结构符合Cascader级联选择器

2.前端代码

2.1

2.2js代码

export default {
  data () {
    return {
      visible: false,
      dataForm: {
        categoryId: '',
        name: '',
        title: ''
      },
      props: {
        categoryId: 'id',
        value: 'id',
        label: 'name' //对应下拉标题
      },
      dataList: [],
    }
  },
  init (id) {
    this.$http({
      url: this.$http.adornUrl(`/category/category/categoryList`),
      method: 'get'
    }).then(({data}) => {
      if (data && data.code === 0) {
        this.dataList = this.getTreeData(data.cateList)
      }
    })
  },
  //判断是否有子类目，如果有子类目直接返回，如果没有设置为undefined进行返回
  getTreeData (data) {
    // 循环遍历json数据
    for (var i = 0; i < data.length; i++) {
      if (data[i].children.length < 1) {
        // children若为空数组，则将children设为undefined
        data[i].children = undefined
      } else {
        // children若不为空数组，则继续 递归调用 本方法
        this.getTreeData(data[i].children)
      }
    }
    return data
  },
  handleChange (name) {
    console.log(name)
  }
}

下拉框下方的滑动栏，暂未找到去除的方式，如果有遇到过的大牛们，希望能够解答一下，在此谢过