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
<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>
渲染：
往期干货：
