按树节点展示及下拉框可选择操作使用到ui库element中的<el-input>、<el-tree>、<el-dropdown>
具体使用方法参见:https://element.eleme.cn/#/zh-CN/component/tree、https://element.eleme.cn/#/zh-CN/component/dropdown
效果展示:
功能:搜索过滤功能;以树节点的形式展示公司-子公司-部门架构,节点可收缩展开;对每个节点进行操作,具体操作写在下拉弹窗中。
ps:由于小编css样式没学好,为了调整这个样式真的花了一些时间,样式代码应该可调整精简,欢迎批评指正。
完整代码:(iconfont图标自下)
<template>
<div class="employee">
<el-input placeholder="搜索部门" v-model="filterText"></el-input>
<el-tree
:data="departmentTree"
node-key="departmentId"
:props="departmentTreeProps"
default-expand-all
ref="departmentTree"
:filter-node-method="filterDepartNode"
>
<div class="tree-node-group" slot-scope="{ node, data }">
<span class="tree-node-title">
<i :class="data.icon"></i>
<span class="node-label">{{ node.label}}</span>
</span>
<el-dropdown>
<span class="el-dropdown-link">
<i class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="addFormVisible = true">添加子部门</el-dropdown-item>
<el-dropdown-item @click.native="editdepartmentName(item.departmentName)">修改部门名</el-dropdown-item>
<el-dropdown-item @click.native="deleteFormVisible = true">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
departmentTreeProps: {
children: "childList",
label: "departmentName"
},
filterText: "",
departmentTree: [
{
departmentId: 0,
departmentName: "xxxxxxxxxxxxxxxx公司",
icon: "iconfont icon-gongsimingcheng",
childList: [
{
departmentId: 1,
departmentName: "a子公司",
icon: "iconfont icon-bumenyongneng",
childList: [
{
departmentId: 6,
departmentName: "人力资源部"
},
{
departmentId: 7,
departmentName: "后勤部"
}
]
},
{
departmentId: 2,
icon: "iconfont icon-bumenyongneng",
departmentName: "b子公司",
childList: [
{
departmentId: 6,
departmentName: "综合部"
},
{
departmentId: 8,
departmentName: "财务部"
}
]
},
{
departmentId: 3,
departmentName: "c子公司",
icon: "iconfont icon-bumenyongneng",
childList: [
{
departmentId: 7,
departmentName: "后勤部"
},
{
departmentId: 8,
departmentName: "财务部"
}
]
}
]
}
]
};
},
watch: {
filterText(val) {
this.$refs.departmentTree.filter(val);
this.$refs.tableData.filter(val);
}
},
methods: {
// 查询节点
filterDepartNode(value, departmentTree) {
if (!value) return true;
return departmentTree.departmentName.indexOf(value) !== -1;
}
}
};
</script>
<style lang="less">
// 树
.employee {
width: 250px;
.el-input {
margin-bottom: 10px;
.el-input__inner {
height: 34px;
// 设置input框圆角
border-radius: 17px;
}
}
.el-tree {
.el-tree-node {
width: 100%;
padding: 4px 0;
// 设置下三角图标不可见
.el-tree-node__expand-icon {
display: none;
}
//一级+其他子父节点
.el-tree-node__content {
background: #ccc;
height: 35px;
.tree-node-group {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
.tree-node-title {
background: #ebf3ff;
height: 100%;
width: 100%;
color: #3377ff;
margin: 0 auto;
display: flex;
align-items: center;
font-size: 14px;
// 一级节点图标
.icon-gongsimingcheng {
background: #fff;
color: #409eff;
font-size: 26px;
padding: 8px 0px;
padding-right: 5px;
margin-right: 10px;
}
}
// 右侧下拉
.el-dropdown {
// 设置图标靠右对齐
position: absolute;
right: 0px;
.el-dropdown-link {
.el-icon-more {
transform: rotate(90deg);
color: #aaa;
}
}
}
}
}
// 其他子节点
.el-tree-node__children {
.el-tree-node__content {
height: 28px;
background: #fff;
.tree-node-title {
background-color: #fff;
color: #18263c;
}
.el-dropdown-link {
background: #fff;
}
}
// 二级节点图标
.icon-bumenyongneng {
margin: 0 5px;
}
// 三级节点图标
.icon-yuangongzhanghaoguanli {
margin-right: 5px;
margin-left: -4px;
}
}
}
}
}
</style>