组装树形SpringBoot +Vue+Element-UI

实现效果

后端

SysOrg机构实体

@Data
@TableName("SYS_ORG")
public class SysOrg implements Serializable {
     
    private static final long serialVersionUID = 1L;
    /**
     * 机构编码
     */
    @TableId
    private String orgNo;
    /**
     * 机构名称
     */
    private String orgName;
    /**
     * 上级机构ID，一级机构为0
     */
    private String parentNo;
	/**
     * 父机构编码
     */
    @TableField(exist = false)
    private String parentName;
}

XML SQL

<sql id="sysOrgColumn">
    o.org_no,
    o.org_name,
    o.parent_no
sql>

<select id="getAllOrg" resultType="com.base.modules.sys.entity.SysOrg">
    SELECT
     <include refid="sysOrgColumn"/>
    ,so.org_name parent_name
    FROM sys_org o
    LEFT JOIN sys_org so ON o.parent_no = so.org_no
select>

前端

封装树形数据方法

/**
 * 树形数据转换
 */
export function treeDataTranslate (data, id = 'id', pid = 'parentId') {
     
  let res = []
  let temp = {
     }
  for (let i = 0; i < data.length; i++) {
     
    temp[data[i][id]] = data[i]
  }
  for (let k = 0; k < data.length; k++) {
     
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
     
      if (!temp[data[k][pid]]['children']) {
     
        temp[data[k][pid]]['children'] = []
      }
      if (!temp[data[k][pid]]['_level']) {
     
        temp[data[k][pid]]['_level'] = 1
      }
      data[k]['_level'] = temp[data[k][pid]]._level + 1
      temp[data[k][pid]]['children'].push(data[k])
    } else {
     
      res.push(data[k])
    }
  }
  return res
}

main.js中挂载全局方法

import {
     treeDataTranslate} from '@/utils'
Vue.prototype.treeDataTranslate = treeDataTranslate     // 树形数据转换

页面实现

<template>
  <div>
    <el-popover
      ref="orgListPopover"
      placement="top-start"
      trigger="click"
      :value="popoverVisible">
      <div>
        <el-input clearable placeholder="请输入关键字" v-model="searchValue" size="small" @input="filterChange">el-input>
        <el-scrollbar style="height: 500px">
          <el-tree
            :filter-node-method="filterNode"
            :data="orgList"
            :props="orgListTreeProps"
            node-key="orgNo"
            ref="orgListTree"
            @current-change="orgListTreeCurrentChangeHandle"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="false">
          el-tree>
        el-scrollbar>
      div>
    el-popover>
    <el-input 
      v-model="orgName" 
      v-popover:orgListPopover 
      :readonly="true" 
      placeholder="点击选择机构"
      @click.native="inputClickHandle($event)" />
  div>
template>

<script>

export default {
       
  name: "testTree",
  data() {
       
    return {
       
      popoverVisible: false,
      searchValue: '',
      orgList: [],
      orgListTreeProps: {
       
        label: 'orgName',
        children: 'children'
      },
      orgName: '',
      orgNo: ''
    };
  },
  methods: {
       
    filterChange () {
       
      this.$refs.orgListTree.filter(this.searchValue)
    },
    filterNode (val, data) {
       
      if (!val) return true
      return data.orgName.indexOf(val) !== -1
    },
    orgListTreeCurrentChangeHandle (data) {
       
      this.orgNo = data.orgNo
      this.orgName = data.orgName
      this.popoverVisible = false
    },
    inputClickHandle () {
       
      setTimeout(() => {
       
        this.popoverVisible = true
      }, 500)
    },
    getAllOrg () {
       
      this.$http({
       
        url: "api/sysOrg/getAllOrg",
        methods: "get"
      })
        .then(response => {
       
          this.orgList = response.body;
          this.orgList = this.treeDataTranslate((this.orgList || []), 'orgNo', 'parentNo')
          console.log(this.orgList);
        })
        .catch(function(error) {
       
          console.log(error);
        });
    }
  },
  mounted() {
       
    this.$nextTick(() => {
       
      this.getAllOrg()
    })
  }
};
script>