将普通的数组转换为父子结构(vue,element-ui)

将普通的数组转换为父子结构(vue)

树形效果:

工具类 common.js

注意:方法里的 pid 父类id属性,要与你的父类id属性名一致;

export default {timestampToTime: (timestamp) => {let date = new Date(timestamp * 1000)let Y = date.getFullYear() + '-'let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'let D = date.getDate() + ' 'let h = date.getHours() + ':'let m = date.getMinutes() + ':'let s = date.getSeconds()return Y + M + D + h + m + s},transformTozTreeFormat: function (sNodes) { //将普通的数组转换为父子结构var i, l;var r = [];var tmpMap = {};for (i = 0, l = sNodes.length; i < l; i++) {tmpMap[sNodes[i].id] = sNodes[i];}for (i = 0, l = sNodes.length; i < l; i++) {var p = tmpMap[sNodes[i].pid];if (p && sNodes[i].id != sNodes[i].pid) {var children = this.nodeChildren(p);if (!children) {children = this.nodeChildren(p, []);}children.push(sNodes[i]);} else {r.push(sNodes[i]);}}return r;},nodeChildren: function (node, newChildren) {if (typeof newChildren !== 'undefined') {node.children = newChildren;}return node.children;}
}

使用:

<template><div class="dashboard-container"><div class="app-container"><el-card shadow="never"><div class='organization-index'><div class='organization-index-top'><div class='main-top-title'><el-tabs v-model="activeName"><el-tab-pane label="组织结构" name="first"></el-tab-pane><div class="el-tabs-report"><a class="el-button el-button--primary el-button--mini" title="导出" >导入</a><a class="el-button el-button--primary el-button--mini" title="导出" >导出</a></div></el-tabs></div></div><div style="overflow: scroll;white-space:nowrap"  class="treBox"><div class="treeCon clearfix"><span><i class="fa fa-university" aria-hidden="true"></i><span ><strong>{{departData.companyName}}</strong></span></span><div class="fr"><span class="treeRinfo"><div class="treeRinfo"><span>{{departData.companyManage}}</span><span>在职  <em class="colGreen" title="在职人数">---</em>&nbsp;&nbsp;(<em class="colGreen" title="正式员工">---</em>&nbsp;/&nbsp;<em class="colRed" title="非正式员工">---</em>)</span></div><div class="treeRinfo"><el-dropdown class="item"><span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item><el-button type="text" @click="handlAdd('')">添加子部门</el-button></el-dropdown-item><el-dropdown-item><el-button type="text" @click="handleList()">查看待分配员工</el-button></el-dropdown-item></el-dropdown-menu></el-dropdown></div></span>  </div></div><!-- 构造树形列表叶子 <i class="fa fa-male"></i>非叶子 展开 <i class="fa fa-minus-square-o">闭合 <i class="fa fa-plus-square-o"><div class="generalClass" slot-scope="{node,data}" style="width:99%">--><!--    开始   --><el-tree:data="data5"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttontype="text"size="mini"@click="() => append(data)">Append</el-button><el-buttontype="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree><!--      结束 --></div></div>    </el-card></div>
</div>
</template><!-- 引入组件 -->
<script>
import {list} from "@/api/base/dept"
import commonApi from '@/utils/common'
export default {data() {return {activeName: 'first', departData:{},depts:[]}},methods: {getList(){list().then(res =>{this.departData = res.data.data//将普通的数组转换为父子结构this.depts = commonApi.transformTozTreeFormat( res.data.data.depts)})}},created: function() {this.getList();},
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-dropdown {color: #000000
}
.el-tree-node__content>.el-tree-node__expand-icon {padding:0px;
}
.el-tree-node__expand-icon {color:#ffffff
}
.generalClassNode {padding-left: 20px;
}
.el-tree-node__content{font-size: 16px;line-height: 36px;height:36px;
}
.custom-tree-node{padding-left: 20px;
}
.objectTree {overflow: auto;z-index: 100;width: 300px;border: 1px solid #dcdfe6;margin-top: 5px;left: 70px;
}
.el-tabs__content {overflow: initial;
}
.boxpad {margin-left: -40px;
}
</style>
<style  rel="stylesheet/scss" lang="scss" scoped>
.el-tree-node__expand-icon{}
.el-icon-caret-right{}
.el-tree-node__content{font-size: 14px;line-height: 36px;
}
.generalClass {font-size: 14px;line-height: 36px;color:#000000
}
.all {position: relative;min-height: 100%;padding-bottom: 200px;
}
.organization-main:after,
.organization-index-top:after {display: block;clear: both;content: '';visibility: hidden;height: 0;
}
.organization-main {font-size: 14px;font-size: 14px;
}.organization-index {padding-bottom: 20px;margin-left: 20px;
}
.main-top-title {padding-left: 20px;padding-top: 20px;text-align: left;
}::-webkit-scrollbar-thumb {background-color: #018ee8;height: 50px;outline-offset: -2px;outline: 8px solid #fff;-webkit-border-radius: 4px;
}
::-webkit-scrollbar-track-piece {background-color: #fff;-webkit-border-radius: 0;
}
::-webkit-scrollbar {width: 8px;height: 8px;
}
::-webkit-scrollbar-thumb:hover {background-color: #fb4446;height: 50px;-webkit-border-radius: 4px;
}
.modal-total {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 90;opacity: 0.2;
}
.modal {width: 400px;height: 300px;background-color: #ffffff;z-index: 999;position: absolute;left: 45%;top: 20%;text-align: center;
}
.treBox {padding: 30px 120px 0;
}
.organization-index-top {position: relative;.el-tabs-report {position: absolute;top: -50px;right: 15px;}
}
.treeCon {border-bottom: 1px solid #cfcfcf;padding: 10px 0;margin-bottom: 10px;.el-dropdown {color: #333;}
}
.treeRinfo {display: inline-block;
}
.treeRinfo span {padding-left: 30px;
}
</style>

实体类:

package com.ihrm.domain.company;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import javax.persistence.*;
import java.io.Serializable;
import java.util.Date;
import java.util.List;/*** (Department)实体类*/
@Entity
@Table(name = "co_department")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department implements Serializable {private static final long serialVersionUID = -9084332495284489553L;//ID@Idprivate String id;/*** 父级ID*/@Column(name="parent_id")private String pid;/*** 企业ID*//* @Column(name="company_id")*/private String companyId;/*** 部门名称*/private String name;/*** 部门编码，同级部门不可重复*/private String code;/*** 负责人ID*/private String managerId;/***  负责人名称*/private String manager;/*** 介绍*/private String introduce;/*** 创建时间*/private Date createTime;/****/private String city;/****/private String category;}

表:

CREATE TABLE `co_department` (`id` varchar(40) NOT NULL,`company_id` varchar(255) NOT NULL COMMENT '企业ID',`parent_id` varchar(255) DEFAULT NULL COMMENT '父级部门ID',`name` varchar(255) NOT NULL COMMENT '部门名称',`code` varchar(255) NOT NULL COMMENT '部门编码',`category` varchar(255) DEFAULT NULL COMMENT '部门类别',`manager_id` varchar(255) DEFAULT NULL COMMENT '负责人ID',`city` varchar(255) DEFAULT NULL COMMENT '城市',`introduce` text COMMENT '介绍',`create_time` datetime NOT NULL COMMENT '创建时间',`manager` varchar(40) DEFAULT NULL COMMENT '部门负责人',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

将普通的数组转换为父子结构(vue,element-ui)相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...

将普通的数组转换为父子结构(vue,element-ui)

将普通的数组转换为父子结构(vue,element-ui)相关推荐

最新文章

热门文章