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>
