vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
推荐指数：star:62.1k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/
今天就来说一下，怎么使用Tree Table 树形表格。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：
组件：https://element.eleme.cn/#/zh-CN/component/tree
分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
静态
在文档上选一颗自己想要的树的demo
-
<template>
-
<div
class="grid-content
bg-purple">
-
<el-tree
-
:data="data"
-
show-checkbox
-
node-key="id"
-
:default-expanded-keys="[2,
3
]"
-
:default-checked-keys="[5]"
-
>
-
</el-tree>
-
</div>
-
</template>
-
<script>
-
export
default {
-
data() {
-
return {
-
data: [
-
{
-
id:
1,
-
label:
"一级 2",
-
children: [
-
{
-
id:
3,
-
label:
"二级 2-1",
-
children: [
-
{
-
id:
4,
-
label:
"三级 3-1-1",
-
},
-
{
-
id:
5,
-
label:
"三级 3-1-2",
-
disabled:
true,
-
},
-
],
-
},
-
{
-
id:
2,
-
label:
"二级 2-2",
-
disabled:
true,
-
children: [
-
{
-
id:
6,
-
label:
"三级 3-2-1",
-
},
-
{
-
id:
7,
-
label:
"三级 3-2-2",
-
disabled:
true,
-
},
-
],
-
},
-
],
-
},
-
],
-
defaultProps: {
-
children:
"children",
-
label:
"label",
-
},
-
}
;
-
},
-
}
;
-
</script>
效果是这个样子的
在实际应用之中，需要从后端请求过来json数据，然后再对json数据进行一些处理，渲染在界面。
我这里有一些json数据，但是并不是我想要的格式，并不是以上代码中的格式，需要做一些处理，对json的格式的转化。
json数据
-
{
-
"msg":
"success",
-
"code":
1,
-
"data": [{
-
"id":
1,
-
"organName":
"住部门",
-
"parentId":
null,
-
"manager":
"zs",
-
"phone":
null,
-
"companyId":
1,
-
"address":
null
-
}, {
-
"id":
19,
-
"organName":
"uiui",
-
"parentId":
1,
-
"manager":
"iuui",
-
"phone":
"ui",
-
"companyId":
1,
-
"address":
null
-
}, {
-
"id":
20,
-
"organName":
"3223",
-
"parentId":
19,
-
"manager":
"32",
-
"phone":
"3232",
-
"companyId":
1,
-
"address":
null
-
}, {
-
"id":
22,
-
"organName":
"测试部",
-
"parentId":
1,
-
"manager":
"李云泥",
-
"phone":
"18117166505",
-
"companyId":
1,
-
"address":
null
-
}, {
-
"id":
23,
-
"organName":
"123",
-
"parentId":
19,
-
"manager":
"1",
-
"phone":
"12",
-
"companyId":
1,
-
"address":
null
-
}, {
-
"id":
24,
-
"organName":
"www",
-
"parentId":
19,
-
"manager":
"",
-
"phone":
"",
-
"companyId":
1,
-
"address":
null
-
}]
-
}
动态demo如下：
-
<template>
-
<div
class="grid-content bg-purple">
-
<el-tree
-
:
data=
"treeData"
-
show-checkbox
-
default-expand-all
-
node-key=
"id"
-
ref=
"tree"
-
highlight-current
-
:props=
"defaultProps"
-
-
>
-
</el-tree>
-
</div>
-
</template>
-
<script>
-
//调用接口
-
import { getQuerycheckList } from
"@/api/data/organ";
-
export
default {
-
data() {
-
return {
-
setTree: [],
-
defaultProps: {
-
children:
"children",
-
label:
"organName",
-
},
-
-
treeData: [],
-
organList: [],
-
};
-
},
-
-
created() {
-
//加载部门管理节点接口定义
-
this.getQuerycheckList();
-
},
-
-
methods: {
-
//部门管理节点接口定义
-
getQuerycheckList() {
-
const params = {};
-
this.dataLoading =
true;
-
getQuerycheckList(params).then((res) => {
-
this.setTree = res.
data;
-
this.organList = res.
data.map((a) => ({
-
label: a.organName,
-
value: a.id,
-
}));
-
//debugger;
-
this.getListData();
-
this.dataLoading =
false;
-
});
-
},
-
-
//对json的格式的转化
-
getListData() {
-
let dataArray = [];
-
this.setTree.forEach(function (
data) {
-
// debugger;
-
let parentId =
data.parentId;
-
if (parentId ===
null) {
-
let objTemp = {
-
id:
data.id,
-
organName:
data.organName,
-
manager:
data.manager,
-
phone:
data.manager,
-
parentId: parentId,
-
};
-
dataArray.push(objTemp);
-
}
-
});
-
this.treeData =
this.data2treeDG(
this.setTree, dataArray);
-
},
-
data2treeDG(datas, dataArray) {
-
for (let j =
0; j < dataArray.length; j++) {
-
let dataArrayIndex = dataArray[j];
-
let childrenArray = [];
-
let Id = dataArrayIndex.id;
-
for (let i =
0; i < datas.length; i++) {
-
let
data = datas[i];
-
let parentId =
data.parentId;
-
if (parentId == Id) {
-
//判断是否为儿子节点
-
let objTemp = {
-
id:
data.id,
-
organName:
data.organName,
-
manager:
data.manager,
-
phone:
data.phone,
-
parentId: parentId,
-
};
-
childrenArray.push(objTemp);
-
}
-
}
-
dataArrayIndex.children = childrenArray;
-
if (childrenArray.length >
0) {
-
this.data2treeDG(datas, childrenArray);
-
}
-
}
-
return dataArray;
-
},
-
},
-
};
-
</script>
