vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
推荐指数：
今天就来说一下，怎么使用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
<template> <div> <el-col :span="6"> <div class="ztree"> <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" @node-click="nodeClickHandler" @check="checkHandler" :render-content="renderContent" > </el-tree> </div> </el-col> </div> </template> <script> //调用接口 // import { deleteSubject } from "@/api/data/organ"; export default { data() { return { setTree: [], defaultProps: { children: "children", label: "organName", }, treeData: [], organList: [], }; }, created() { //加载部门管理节点接口定义 this.getQuerycheckList(); }, methods: { renderContent(h, { node, data, store }) { console.log(data); return ( <span class="custom-tree-node" on-mouseenter={() => (data.isHover = true)} on-mouseleave={() => (data.isHover = false)} > <span>{data.organName}</span> {data.parentId !== 0 && data.isHover && ( <i class="el-icon-error danger" on-click={(e) => { e.stopPropagation(); this.remove(node, data); }} ></i> )} </span> ); }, remove(node, data) { this.$confirm("此操作将永久删除该条目, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.handleDelete(null, data); if (data.parentId === 0) { return; } const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex((d) => d.id === data.id); children.splice(index, 1); // 发请求删除 this.$message({ type: "success", message: "删除成功!", }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, //勾选 checkHandler(...value) { console.log(value[1]); console.log(value[1].checkedNodes.map((a) => a.organName)); }, //部门管理节点接口定义 getQuerycheckList() { const params = {}; this.dataLoading = true; import("./mock").then((res) => { this.setTree = res.data; this.organList = res.data.map((a) => ({ label: a.organName, value: a.id, })); this.getListData(); this.dataLoading = false; }); }, //对json的格式的转化 getListData() { let dataArray = []; this.setTree.forEach(function (data) { let parentId = data.parentId; if (parentId === 0) { 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, isHover: false, }; childrenArray.push(objTemp); } } dataArrayIndex.children = childrenArray; if (childrenArray.length > 0) { //有儿子节点则递归 this.data2treeDG(datas, childrenArray); } } return dataArray; }, //调用删除接口 handleDelete(index, row) { const params = { id: row.id, }; this.dataLoading = true; deleteSubject(params).then((res) => { this.$notify({ message: "删除成功", type: "success", duration: 2000, }); this.getQuerycheckList(); console.log(this.pvData); this.dataLoading = false; }); }, nodeClickHandler(...rest) { console.log(rest); this.form = rest[0]; }, }, }; </script> <style lang="scss"> .danger { color: red; } </style>
渲染：
