如何封装ElementUI的el-tree控件，请求后台数据构建部门列表的父子级前端数据结构？

本文共计2173个文字，预计阅读时间需要9分钟。

场景+在员工管理系统，存在不少页面需要选择前面的门形结构中的部门进行查询。如何利用ElementUI的el-tree组件封装成公共控件，并请求SpringBoot后台数据获取部门数据？

场景

在人员管理系统中，有不少页面需要选择目前的部门树形结构中的部门进而作为筛选条件进行查询。

怎样借助ElementUI的el-tree控件封装成公共控件并请求SpringBoot后台数据获取部门数据并封装成前端需要的树形结构数据。

注：

关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

实现

前端实现

首先在项目下新建components目录存放公共组件，在目录下新建LeftCheckTree目录，并在此目录下新建index.vue用来实现公共部门树组件。