vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
推荐指数：
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
功能：当鼠标划过Tree 树形控件的节点的时候，会出现一个删除的按钮
点击删除按钮，会出现弹框询问是否删除
选中删除，则删除树节点（最上层的父节点不可删除）
1:在views底下新建一个test文件夹
里面新建一个vue文件和一个json文件
2：使用
mock.json
{
"msg": "success",
"code": 1,
"data": [
{
"id": 1,
"organName": "yy有限公司",
"parentId": 0,
"manager": "zs",
"phone": "zs",
"companyId": 1,
"address": null
},
{
"id": 2,
"organName": "test311",
"parentId": 1,
"manager": "zs",
"phone": "21",
"companyId": 1,
"address": null
},
{
"id": 10,
"organName": "test4",
"parentId": 1,
"manager": "zs",
"phone": null,
"companyId": 1,
"address": null
},
{
"id": 11,
"organName": "2121",
"parentId": 1,
"manager": "212",
"phone": "13661725475",
"companyId": 1,
"address": null
},
{
"id": 12,
"organName": "212121212",
"parentId": 2,
"manager": "212",
"phone": "13661725475",
"companyId": 1,
"address": null
},
{
"id": 13,
"organName": "www群46",
"parentId": 11,
"manager": "ww",
"phone": "123",
"companyId": 1,
"address": null
},
{
"id": 14,
"organName": "www",
"parentId": 11,
"manager": "ww",
"phone": "123",
"companyId": 1,
"address": null
},
{
"id": 15,
"organName": "",
"parentId": null,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 16,
"organName": "21212",
"parentId": null,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 17,
"organName": "2131314",
"parentId": null,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 18,
"organName": "q313",
"parentId": 2,
"manager": "",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 19,
"organName": "8888",
"parentId": 1,
"manager": "11",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 20,
"organName": "21",
"parentId": 1,
"manager": "12",
"phone": "21",
"companyId": 1,
"address": null
},
{
"id": 21,
"organName": "wwww",
"parentId": 1,
"manager": "www",
"phone": "13661725475",
"companyId": 1,
"address": null
},
{
"id": 22,
"organName": "1313",
"parentId": 1,
"manager": "313",
"phone": "31",
"companyId": 1,
"address": null
},
{
"id": 23,
"organName": "test",
"parentId": 1,
"manager": "zs",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 24,
"organName": "test_01",
"parentId": 23,
"manager": "zs",
"phone": "",
"companyId": 1,
"address": null
},
{
"id": 25,
"organName": "w121",
"parentId": 1,
"manager": "212",
"phone": "212",
"companyId": 1,
"address": null
}
]
}
3:
test.vue
渲染：
往期干货：