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

场景

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

 

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

注：

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

实现

前端实现

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

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

然后需要引入一些样式组件和方法等

  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { treeselect } from "@/api/system/dept";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

这里引用的  import { treeselect } from "@/api/system/dept";是获取部门数据的方法

所以在api/system/dept.js中的treeselect方法中会请求后台查询部门数据

// 查询部门下拉树结构
export function treeselect() {
  return request({
    url: '/system/dept/treeselect',
    method: 'get'
  })
}

这里省略封装axios请求的过程，请求后台数据部门下面介绍。

为了实现在此页面一加载完就查询部门数据，在created函数中执行请求数据的方法

    created() {
      this.getTreeselect();
    },
    methods: {
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

请求后台获取的数据赋值给部门树选项数组，此数组需要提前声明

    data() {
      return {
        // 部门树选项
        deptOptions: [],

 

然后通过 :data="deptOptions"将数据绑定给el-tree控件。

控件还添加了filter-node-method对树节点进行筛选时执行的方法，返回true表示这个节点可以显示，返回false则表示这个节点会被隐藏。

:filter-node-method="filterNode"

filterNode是个函数

      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

此组件完整示例代码

然后通过

  export default {
    name: "leftCheckTree",

就可以将此组件暴露并且名字为leftCheckTree

那么我们在需要的页面就可以引用这个组件了。

首先在页面中添加组件