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

最新推荐文章于 2022-11-15 09:31:51 发布

取个有诗意的名字

最新推荐文章于 2022-11-15 09:31:51 发布

阅读量622

点赞数

分类专栏： vue学习应用文章标签： vue学习与应用

本文链接：https://blog.csdn.net/qq_36659409/article/details/99312024

版权

本文介绍了如何基于Element UI在Vue应用中实现级联选择功能。首先，详细讲解了后台代码的实现，包括使用Lombok工具类处理数据，以及接口编写中的JDK 1.8新特性。接着，阐述了前端代码的编写，包括模板和JS部分。然而，对于下拉框下方滑动栏的去除问题，作者提出了疑问，希望能得到大牛的解答。

摘要由CSDN通过智能技术生成

效果展示

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<TreeItemUtil> children;
}

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

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

1.2接口编写

public R categoryList(){
    //数据查询
    List<CategoryEntity> cateList=categoryService.getListAll();
    //转换成节点
    List<TreeItemUtil> allCategory = cateList.stream()
            .map(CategoryEntity::categoryEntity)
            .collect(Collectors.toL