vue el-tree + java 树形结构

 1、java后端

package com.jbossjf.bootproject.model;

import lombok.Data;

import java.util.ArrayList;
import java.util.List;

@Data
public class MonitorTree {
    private String id;
    private String title;
    private String upid;
    private List<MonitorTree> children = new ArrayList<>();
}

@ResponseBody
    @RequestMapping(value = "/API/GetCourseTypeTree", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public List<MonitorTree> GetCourseTypeTree() {

        try {
            List<CourseType> courseTypeList =  courseTypeService.GetList();

            List<MonitorTree> list = new ArrayList<>(courseTypeList.size());
            MonitorTree monitorTree = null;
            for(int i =0;i<courseTypeList.size();i++)
            {
                monitorTree = new MonitorTree();
                monitorTree.setId(courseTypeList.get(i).getId());
                monitorTree.setUpid(courseTypeList.get(i).getUpid());
                monitorTree.setTitle(courseTypeList.get(i).getName());
                list.add(monitorTree);

            }
            List<MonitorTree> result = list.stream()
                    .filter(item -> 0 == Integer.parseInt(item.getUpid()))
                    .map(item -> {

                        item.setChildren(getChildren(item, list));
                        return item;
                    })
                    .collect(Collectors.toList());

            return  result;

        }catch (Exception e) {
            logger.info(e.getStackTrace().toString());
        }

        return null;
    }

    /**
     * 获取children
     * @param root
     * @param all
     * @return
     */
    public List<MonitorTree> getChildren(MonitorTree root, List<MonitorTree> all) {
        List<MonitorTree> children = all.stream()
                .filter(item -> item.getUpid().equals(root.getId()))
                .map((item) -> {

                    item.setChildren(getChildren(item, all));
                    return item;
                }).collect(Collectors.toList());
        return children;
    }

2、vue前端

<template>
  <div style="flex-direction: rows;display: flex;">
    <div class="dtree">
      <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
      <el-tree
        id="el-tree"
        ref="treeForm"
        :data="treeData"
        show-checkbox
        node-key="id"
        :check-on-click-node="false"
        :props="defaultProps"
        class="filter-tree"
        :filter-node-method="filterNode"
        :default-checked-keys="defaultTree"
        @check="changetree"
        @check-change="handleNodeClick"

        @node-contextmenu="rightClick"
      /></div>
  </div></template>

<script>
import {
  GetCourseTypeTree
} from '@/api/course_type'
export default {
  data() {
    return {
      defaultTree: [1],
      filterText: '',
      treeData: [], // 返回所有分类数据
      defaultProps: {
        children: 'children',
        label: 'title'
      }

    }
  },
  created() {
    this.InitTreeList()
    this.changetree()
  },

  methods: {
    handleNodeClick(data, checked, node) {
      console.log('多选框设为单选框', checked, data)
      console.log('data.id:  ' + data.id)
      console.log('data:  ' + JSON.stringify(data))
      // console.log(this.$refs.treeFrom.current-node-key)
      if (checked) {
        this.$refs.treeForm.setCheckedKeys([data.id])
      }

      console.log('getCheckedKeys' + this.$refs.treeForm.getCheckedKeys([data.id]))
    },

    changetree(data, lst) {
      console.log('lst:  ' + JSON.stringify(lst))
      console.log(lst.checkedKeys.length)
      if (lst.checkedKeys.length == 0) {
        // 这里的treeForm是你el-tree命名的ref的值
        this.$refs.treeForm.setCheckedKeys([data.id])
      }
	    alert(data.id)
      // this.InitTreeList()
    },

    rightClick(e) {
      alert(e)
    },
    InitTreeList() {
      GetCourseTypeTree()
        .then(response => {
          this.treeData = response
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }

  }
}
</script>