ElementUI中Tree组件使用案例讲解
Wmenghu 人气:0首先官网上的树形控件教程地址为Element - The world's most popular Vue UI framework
案例一：
要实现这种类型的树控件，并且后边相关操作：
1.1后端准备工作
首先，数据库表为：
查询接口返回的实体类为：
@Data
@NoArgsConstructor
@RequiredArgsConstructor // 有参构造
@EqualsAndHashCode(callSuper = false ,of = "name")// 表示以name去重写的Equals和HashCode
@Accessors(chain = true)
@TableName("t_department")
@ApiModel(value="Department对象", description="")
public class Department implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "id")
@TableId(value = "id", type = IdType.AUTO)
private Integer id;
@ApiModelProperty(value = "部门名称")
@Excel(name = "部门")
@NonNull
private String name;
@ApiModelProperty(value = "父id")
private Integer parentId;
@ApiModelProperty(value = "路径")
private String depPath;
@ApiModelProperty(value = "是否启用")
private Boolean enabled;
@ApiModelProperty(value = "是否上级")
private Boolean isParent;
@ApiModelProperty(value = "子部门列表")
@TableField(exist = false)
private List<Department> children;
@ApiModelProperty(value = "返回结果，存储过程使用")
@TableField(exist = false)
private Integer result;
}
查询接口返回的数据格式：通过属性 children来判断是否有子节点
[
{
"id": 1,
"name": "股东会",
"parentId": -1,
"depPath": ".1",
"enabled": true,
"isParent": true,
"children": [
{
"id": 2,
"name": "董事会",
"parentId": 1,
"depPath": ".1.2",
"enabled": true,
"isParent": true,
"children": [
{
"id": 3,
"name": "总办",
"parentId": 2,
"depPath": ".1.2.3",
"enabled": true,
"isParent": true,
"children": [
{
"id": 4,
"name": "财务部",
"parentId": 3,
"depPath": ".1.2.3.4",
"enabled": true,
"isParent": false,
"children": [],
"result": null
},
{
"id": 5,
"name": "市场部",
"parentId": 3,
"depPath": ".1.2.3.5",
"enabled": true,
"isParent": true,
"children": [
{
"id": 6,
"name": "华东市场部",
"parentId": 5,
"depPath": "1.2.3.5.6",
"enabled": true,
"isParent": true,
"children": [
{
"id": 8,
"name": "上海市场部",
"parentId": 6,
"depPath": "1.2.3.5.6.8",
"enabled": true,
"isParent": false,
"children": [],
"result": null
}
],
"result": null
},
{
"id": 7,
"name": "华南市场部",
"parentId": 5,
"depPath": "1.2.3.5.7",
"enabled": true,
"isParent": false,
"children": [],
"result": null
},
{
"id": 9,
"name": "西北市场部",
"parentId": 5,
"depPath": ".1.2.3.5.9",
"enabled": true,
"isParent": true,
"children": [
{
"id": 10,
"name": "贵阳市场",
"parentId": 9,
"depPath": ".1.2.3.5.9.10",
"enabled": true,
"isParent": true,
"children": [
{
"id": 11,
"name": "乌当区市场",
"parentId": 10,
"depPath": ".1.2.3.5.9.10.11",
"enabled": true,
"isParent": false,
"children": [],
"result": null
}
],
"result": null
}
],
"result": null
}
],
"result": null
},
{
"id": 12,
"name": "技术部",
"parentId": 3,
"depPath": ".1.2.3.12",
"enabled": true,
"isParent": false,
"children": [],
"result": null
},
{
"id": 13,
"name": "运维部",
"parentId": 3,
"depPath": ".1.2.3.13",
"enabled": true,
"isParent": false,
"children": [],
"result": null
}
],
"result": null
}
],
"result": null
},
{
"id": 150,
"name": "aaa",
"parentId": 1,
"depPath": ".1.150",
"enabled": true,
"isParent": true,
"children": [
{
"id": 151,
"name": "abbb",
"parentId": 150,
"depPath": ".1.150.151",
"enabled": true,
"isParent": false,
"children": [],
"result": null
}
],
"result": null
},
{
"id": 154,
"name": "ccc",
"parentId": 1,
"depPath": ".1.154",
"enabled": true,
"isParent": false,
"children": [],
"result": null
},
{
"id": 157,
"name": "dddd",
"parentId": 1,
"depPath": ".1.157",
"enabled": true,
"isParent": false,
"children": [],
"result": null
}
],
"result": null
}
]
1.2前端代码
从官网上复制一个模板过来，搜索的话，直接往下找一个有搜索框的，把搜索框复制过来，复制好就可以开始修改，写增删改查的方法调用了。
写好的代码如下：
<template>
<div style="width: 550px;">
<el-input
placeholder="请输入部门名称进行搜索..."
prefix-icon="el-icon-search"
v-model="filterText">
</el-input>
<el-tree
:data="deps"
:props="defaultProps"
:filter-node-method="filterNode"
:expand-on-click-node="false"
ref="tree">
<!-- slot-scope可以自定义树节点里的内容，node当前节点的node对象，data后端对应返回的数据 -->
<span class="custom-tree-node" slot-scope="{ node, data }" style="display:flex; justify-content: space-between;width: 100%;">
<span>{{ data.name }}</span>
<span>
<el-button
type="primary"
size="mini"
class="depBtn"
@click="() => showAddDep(data)">
添加部门
</el-button>
<el-button
type="danger"
size="mini"
class="depBtn"
@click="() => deleteDep(data)">
删除部门
</el-button>
</span>
</span>
</el-tree>
<!-- 添加部门的弹出框 -->
<el-dialog
title="添加部门"
:visible.sync="dialogVisible"
width="30%">
<div>
<table>
<tr>
<td><el-tag>上级部门</el-tag></td>
<td><el-tag>{{pname}}</el-tag></td>
</tr>
<tr>
<td><el-tag>部门名称</el-tag></td>
<td><el-input v-model="dep.name" placeholder="请输入部门名称..."></el-input></td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="doAddDep">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data(){
return{
// 树的搜索条件
filterText: '',
// 树的数据
deps: [],
// 树的配置
defaultProps: {
children: 'children',
label: 'name'
},
// 添加弹出框
dialogVisible: false,
// 添加的部门数据
dep:{
name:'',
parentId: -1
},
// 上级部门名称
pname: ''
}
},
mounted(){
this.initDeps();
},
methods: {
// 初始化数据
initDeps(){
this.getRequest('/system/basic/department/').then(resp=>{
this.deps = resp;
})
},
// 树的搜索
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 添加弹框
showAddDep(data){
console.log(data)
this.dep.parentId = data.id;
this.pname = data.name;
this.dialogVisible = 'true'
},
// 添加
doAddDep(){
this.postRequest('/system/basic/department/',this.dep).then(resp=>{
if(resp.code==200){
resp.obj.children = []
this.addDep2Deps(this.deps,resp.obj);
this.initDep();
this.dialogVisible = false;
}
})
},
initDep(){
this.dep = {
name: '',
parentId: -1
}
this.panme = ''
},
// 添加成功后手动的给树加数据
addDep2Deps(deps,dep){
for(let i = 0; i<deps.length; i++){
let d= deps[i];
if(d.id == dep.parentId){
d.children = d.children.concat(dep);
if(d.children.length>0){
d.isParent = true;
}
return;
}else{
// 递归
this.addDep2Deps(d.children,dep);
}
}
},
// 删除
deleteDep(data){
console.log(data)
if(data.isParent){
this.$message.error("父部门无法删除");
}else{
this.$confirm('此操作将永久['+data.name+']部门, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/department/'+data.id).then(resp=>{
if(resp.code==200){
this.removeDepFromDeps(null,this.deps,data.id);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
// 手动删除 (父部门，总部门数据，要删除的部门id)
removeDepFromDeps(p,deps,id){
for(let i=0; i<deps.length; i++){
let d = deps[i];
if(d.id==id){
deps.splice(i,1);
if(deps.length==0){
p.isParent = false;
}
return;
}else{
this.removeDepFromDeps(d,d.children,id);
}
}
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
}
}
</script>
<style>
.depBtn{
padding: 3px;
}
</style>
需要注意的是：
1：树组件中 :data="deps" 加载树组建的数据。:props="defaultProps" 加载树组件的配置，其中label是给个枝叶的名字对应的字段，children是子节点对应的字段。:filter-node-method="filterNode" 树组件的搜索,filterNode过滤的回调，这个官网拷贝即可。:expand-on-click-node="false" 关闭点击折叠，只有点击前面的小三角才能展开折叠。
2：搜索框绑定的数据filterText，下面监听这个数据的改变，如果改变了，就调用树的filter方法（this.$refs.tree.filter(val);），进行过滤，这个方法的回调在树组件的属性中定义:filter-node-method="filterNode" ，也就是输入框值改变了，会去掉filterNode这个方法，这个方法传入两个值，value是文本框输入值，data是树组件的数据，value为空直接返回，不为空则过滤。
3： 添加部门的时候，添加成功后不能单纯的掉接口，重新请求一次树中的数据，这样的话，每添加一个部门，整个树就会折叠起来。这时候就需要不调接口请求新的数据，在js中操作树中的数据this.deps，让它和数据库保持同步。首先在成功后调用方法： addDep2Deps(deps,dep) 这个方法第一个参数是整个树中的数据，第二个参数是新添加的树的数据（这个数据是添加成功接口回显的数据，也就是添加的这条记录信息）在这个方法中，会循环，找到对应的父节点，给它的子节点拼接数据，修改父节点isParent属性（是否有孩子），之后就一直递归，知道添加完成为止。这个数据添加成功后，清空弹出框中输入的信息，关闭弹出框。
4：删除操作，同样，删除时也要手动的在js中把这条数据删除，不能请求新数据，请求新数据会导致树整个关闭，用户体验十分不好，需要在js中把树中的数据和数据库中进行同步。
调用接口删除成功后，调用removeDepFromDeps(p,deps,id)方法，在js中进行数据删除，调用时，第一个参数传null表示从顶层节点开始往下找，第二个参数是树的数据，第三个参数是要删除部门的id。同样进行循环，添加中比较的是父节点的id，删除是，比较的就是这个叶子的id，如果相同，那就删除，同时，判断把这个叶子删掉后，这个枝下面还有没有叶子，因为有叶子的枝是不能删除的，所以要再判断一下修改isParent的状态，之后还是一样，在一层中没有查询到的话，就递归到下一层去找。
案例二
这种前面带有选择框的，进行授权操作
2.1后端准备
对应的数据库表
对应的实体类：
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("t_menu")
@ApiModel(value="Menu对象", description="")
public class Menu implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "id")
@TableId(value = "id", type = IdType.AUTO)
private Integer id;
@ApiModelProperty(value = "url")
private String url;
@ApiModelProperty(value = "path")
private String path;
@ApiModelProperty(value = "组件")
private String component;
@ApiModelProperty(value = "菜单名")
private String name;
@ApiModelProperty(value = "图标")
private String iconCls;
@ApiModelProperty(value = "是否保持激活")
private Boolean keepAlive;
@ApiModelProperty(value = "是否要求权限")
private Boolean requireAuth;
@ApiModelProperty(value = "父id")
private Integer parentId;
@ApiModelProperty(value = "是否启用")
private Boolean enabled;
@ApiModelProperty(value = "子菜单")
@TableField(exist = false) // 告诉mybatisplus这个字段不在表中，查询的时候不要去查
private List<Menu> children;
@ApiModelProperty(value = "角色列表")
@TableField(exist = false)
private List<Role> roles;
}
查询接口返回的数据
{
"code": 200,
"message": "查询成功",
"obj": [
{
"id": 1,
"url": null,
"path": null,
"component": null,
"name": "所有",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": [
{
"id": 2,
"url": null,
"path": null,
"component": null,
"name": "员工资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": [
{
"id": 7,
"url": null,
"path": null,
"component": null,
"name": "基本资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 8,
"url": null,
"path": null,
"component": null,
"name": "高级资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 3,
"url": null,
"path": null,
"component": null,
"name": "人事管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": [
{
"id": 9,
"url": null,
"path": null,
"component": null,
"name": "员工资料",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 10,
"url": null,
"path": null,
"component": null,
"name": "员工奖惩",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 11,
"url": null,
"path": null,
"component": null,
"name": "员工培训",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 12,
"url": null,
"path": null,
"component": null,
"name": "员工调薪",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 13,
"url": null,
"path": null,
"component": null,
"name": "员工调动",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 4,
"url": null,
"path": null,
"component": null,
"name": "薪资管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": [
{
"id": 14,
"url": null,
"path": null,
"component": null,
"name": "工资账套管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 15,
"url": null,
"path": null,
"component": null,
"name": "员工账套设置",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 16,
"url": null,
"path": null,
"component": null,
"name": "工资表管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 17,
"url": null,
"path": null,
"component": null,
"name": "月末处理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 18,
"url": null,
"path": null,
"component": null,
"name": "工资表查询",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 5,
"url": null,
"path": null,
"component": null,
"name": "统计管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": [
{
"id": 19,
"url": null,
"path": null,
"component": null,
"name": "综合信息统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 20,
"url": null,
"path": null,
"component": null,
"name": "员工积分统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 21,
"url": null,
"path": null,
"component": null,
"name": "人事信息统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 22,
"url": null,
"path": null,
"component": null,
"name": "人事记录统计",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
}
],
"roles": null
},
{
"id": 6,
"url": null,
"path": null,
"component": null,
"name": "系统管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": [
{
"id": 23,
"url": null,
"path": null,
"component": null,
"name": "基础信息设置",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 24,
"url": null,
"path": null,
"component": null,
"name": "系统管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 25,
"url": null,
"path": null,
"component": null,
"name": "操作日志管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 26,
"url": null,
"path": null,
"component": null,
"name": "操作员管理",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 27,
"url": null,
"path": null,
"component": null,
"name": "备份恢复数据库",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
},
{
"id": 28,
"url": null,
"path": null,
"component": null,
"name": "初始化数据库",
"iconCls": null,
"keepAlive": null,
"requireAuth": null,
"parentId": null,
"enabled": null,
"children": null,
"roles": null
}
],
"roles": null
}
],
"roles": null
}
]
}
2.2前端代码
<template>
<div>
<!-- 添加角色 -->
<div class="permissManaTool">
<el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
<template slot="prepend">ROLE_</template>
</el-input>
<el-input size="small" placeholder="请输入角色中文名" v-model="role.nameZh" @keydown.enter.native="addRole"></el-input>
<el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
</div>
<!-- 手风琴 -->
<div style="margin-top:10px; width:660px">
<el-collapse v-model="activeName" accordion @change="change">
<el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
<!-- 卡片 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>可访问资源</span>
<el-button style="float: right; padding: 3px 0; color: #ff0000;" type="text" icon="el-icon-delete" @click="doDeleteRole(r)"></el-button>
</div>
<div>
<!-- 树 -->
<el-tree
show-checkbox
node-key="id"
ref="tree"
:key="index"
:default-checked-keys="selectMenus"
:data="allMenus" :props="defaultProps"></el-tree>
<div style="display:flex; justify-content: flex-end">
<el-button size="mini" @click="cancelUpdate">取消修改</el-button>
<el-button size="mini" type="primary" @click="doUpdate(r.id,index)">确定修改</el-button>
</div>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
data(){
return{
role:{
name:'',
nameZh:''
},
activeName : '-1',
roles:[],
allMenus: [],
// 树菜单的属性，children子菜单的属性，label显示出来的名字,都是后端接口返回来的字段名字
defaultProps: {
children: 'children',
label: 'name'
},
// 树中选中的节点
selectMenus: []
}
},
mounted(){
this.initRoles();
},
methods:{
// 初始化所有菜单
initAllMenus(){
this.getRequest('/system/basic/permiss/menus').then(resp=>{
if(resp.code==200){
this.allMenus = resp.obj;
}
})
},
// 根据角色id获取菜单
initSelectdMenus(rid){
this.getRequest('/system/basic/permiss/mid/'+rid).then(resp=>{
if(resp.code==200){
this.selectMenus = resp.obj;
}
})
},
// 获取角色列表
initRoles(){
this.getRequest('/system/basic/permiss/').then(resp=>{
if(resp.code==200){
this.roles = resp.obj;
}
})
},
// 手风琴点击事件，展开rid是每个name，name对应着后端字段id，关闭时rid为空
change(rid){
if(rid){
this.initAllMenus();
this.initSelectdMenus(rid);
}
},
// 修改角色权限
doUpdate(rid,index){
// 拿到这个手风琴下面的树
let tree = this.$refs.tree[index];
// 传true只打印叶子节点的id
let selectedKeys = tree.getCheckedKeys(true);
let url = '/system/basic/permiss/?rid='+ rid;
selectedKeys.forEach(key => {
url += '&mids='+ key;
});
this.putRequest(url).then(resp=>{
if(resp.code==200){
this.activeName = '-1'
}
})
},
cancelUpdate(){
this.activeName = '-1'
},
// 添加角色
addRole(){
if(this.role.name && this.role.nameZh){
this.postRequest('/system/basic/permiss/',this.role).then(resp=>{
if(resp.code==200){
this.initRoles();
this.role.name = '';
this.role.nameZh = '';
}
})
}else{
this.$message.error("所有字段不能为空");
}
},
// 删除角色
doDeleteRole(role){
this.$confirm('此操作将永久删除'+role.nameZh+'角色, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/system/basic/permiss/role/'+r.id).then(resp => {
if(resp.code == 200){
this.initRoles();
}else{
this.$message.error(resp.message)
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
<style>
.permissManaTool{
display: flex;
justify-content: flex-start;
}
.permissManaTool .el-input{
width: 300px;
margin-right: 10px;
}
</style>
值得注意的是：
1：每个角色下面展开的权限树列表用的是手风琴组件（折叠面板）这里还要给树加上key，因为每个手风琴下面都是一个树 折叠面板饿了吗官网
2：树要展示前面的选择框，要给树组件加上show-checkbox属性。:default-checked-keys="selectMenus" 默认选中的key，这个selectMenus需要去data中定义一个数组。
3：在添加时，可通过 let tree = this.$refs.tree[index]; 拿到整个手风琴下面的树，let selectedKeys = tree.getCheckedKeys(true) 获取选中节点的id，修改成功后，把手风琴的折叠属性，定义成-1，折叠即可，因为下次再打开的时候，会去数据库查出这个角色对应菜单的最新数据。
加载全部内容