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
静态
在文档上选一颗自己想要的树的demo
效果是这个样子的
在实际应用之中,需要从后端请求过来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如下: