ElementUI中el-tree控件封装公共控件(部门列表)并请求后台数据获取父子级数据并构建成前端数据结构数据

场景

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

 

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

注：

博客：
https://blog.youkuaiyun.com/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

前端实现

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

在页面上需要一个模糊搜索的输入框和el-tree控件

<template>
  <div>
  <div class="head-container">
    <el-input
      v-model="deptName"
      pla