vue2实现树

效果：

接口返回数据：

vue2前端代码：

  getTree() {
      this.listLoading = true
      getAcademyTree().then(response => {
        console.log(response.data)
        this.classData = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },

this.classData为返回值，赋给tree，node-click是点击结点之后走的方法。

   <el-tree
            ref="tree2"
            v-loading="listLoading"
            :data="classData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            class="filter-tree tree-hight"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />

treeData需要在data中定义,defaultProps也是，label定义的是结点显示的是什么

 data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      classData: []
    }
  },

getAcademyTree为js中对应的方法名，需import导入

import { getAcademyTree} from '@/api/stumanage/academy'

getTree为当前调用方法名，可直接调用即可（在mounted写，默认进页面就调用）

  mounted() {
    this.getTree()
  },

js代码：

export function getAcademyTree() {
  return request({
    url: '/st/st/academy/getAcademyTree',
    method: 'get',
    headers: {
      'Content-Type': 'application/json'
    },
    transformRequest: [function(data) {
      data = JSON.stringify(data)
      return data
    }]
  })
}

后端接口：

controller中

/**
     *
     * @Title: getAcademyTree
     * @Description: 学院、院系、专业树
     * @return @throws
     */
    @ApiOperation(value = "获取院系结构树", notes = "")
    @GetMapping("/getAcademyTree")
    public ResultJsonEntity getAcademyTree() {
        List<StAcademy> academyList = academyService.getAcademyTree();
        return ResultJsonUtil.returnResult(ResultEnum.SUCCESS, getChildInfo(academyList));
    }

/**
     *
     * @Title: getChildInfo
     * @Description: 获取子节点
     * @param academyList
     * @return
     * @throws
     */
    private List<Object> getChildInfo(List<StAcademy> academyList) {
        List<Object> tempList = Lists.newArrayListWithExpectedSize(academyList.size());
        for (StAcademy academy : academyList) {
            List<StAcademyDepartment> departmentList = academyService.getChildDepartment(academy);
            List<StAcademyMajor> majorList = academyService.getChildMajor(academy);
            List<Object> tempList1 = Lists.newArrayListWithExpectedSize(departmentList.size() + majorList.size());
            if (!majorList.isEmpty()) {
                for (StAcademyMajor major : majorList) {
                    tempList1.add(major);
                }
            }
            if (!departmentList.isEmpty()) {
                for (StAcademyDepartment department : departmentList) {
                    tempList1.add(department);
                }
            }
            academy.setChildren(tempList1);
            for (StAcademyDepartment department : departmentList) {
                List<StAcademyMajor> departmentMajorList = departmetService.getChildMajor(department);
                department.setChildren(departmentMajorList);
            }
        }
        // 返回list
        for (StAcademy academy : academyList) {
            tempList.add(academy);
        }
        return tempList;
    }

Impl中：

/**
     *
     * Title: getAcademyTree
     * Description:获取所有父节点学院
     */
    @Override
    public List<StAcademy> getAcademyTree() {
        // 获取所有父节点 学院
        QueryWrapper<StAcademy> queryWrapper = Wrappers.query();
        queryWrapper.eq(ConstantUtil.COLUMN_DEL_FLAG, ConstantUtil.IS_NOT_DEL);
        queryWrapper.eq(ConstantUtil.COLUMN_SCHOOL_CODE, userUtils.getSchoolCode());
        return stAcademyMapper.selectList(queryWrapper);
    }

/**
     *
     * Title: getChildDepartment
     * Description:获取子节点院系
     */
    @Override
    public List<StAcademyDepartment> getChildDepartment(StAcademy stAcademy) {
        // 获取子节点学院
        QueryWrapper<StAcademyDepartment> queryWrapper = Wrappers.query();
        queryWrapper.eq(StDepartmentConstantUtil.COLUMN_ACADEMY_ID, stAcademy.getId());
        queryWrapper.eq(ConstantUtil.COLUMN_DEL_FLAG, ConstantUtil.IS_NOT_DEL);
        queryWrapper.eq(ConstantUtil.COLUMN_SCHOOL_CODE, userUtils.getSchoolCode());
        return stDepartmentMapper.selectList(queryWrapper);
    }

/**
     *
     * Title: getChildMajor
     * Description:获取子节点专业
     */
    @Override
    public List<StAcademyMajor> getChildMajor(StAcademy stAcademy) {
        // 获取子节点专业
        QueryWrapper<StAcademyMajor> queryWrapper = Wrappers.query();
        queryWrapper.eq(StMajorConstantUtil.COLUMN_PARENT_ID, stAcademy.getId());
        queryWrapper.eq(ConstantUtil.COLUMN_DEL_FLAG, ConstantUtil.IS_NOT_DEL);
        queryWrapper.eq(ConstantUtil.COLUMN_SCHOOL_CODE, userUtils.getSchoolCode());
        return stMajorMapper.selectList(queryWrapper);
    }