vue-element-admin一個(gè)基于 vue2.0 和 Eelement 的控制面板 UI 框架，這是使用vue技術(shù)棧開(kāi)發(fā)的前端程序員的首選管理系統(tǒng)模板黎棠，模板以及非常的成熟了抖僵，并且有相關(guān)的社區(qū)和維護(hù)人員鲤看，開(kāi)發(fā)時(shí)候遇到問(wèn)題也不要慌。
推薦指數(shù)：
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗(yàn)：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文檔：https://panjiachen.github.io/vue-element-admin-site/zh/
今天就來(lái)說(shuō)一下耍群，怎么使用Tree Table 樹(shù)形表格义桂。廢話(huà)不多說(shuō)找筝，首先看一下官方文檔吧，看看官方文檔是怎么給到的例子吧：
組件：https://element.eleme.cn/#/zh-CN/component/tree
功能：當(dāng)鼠標(biāo)劃過(guò)Tree 樹(shù)形控件的節(jié)點(diǎn)的時(shí)候慷吊，會(huì)出現(xiàn)一個(gè)刪除的按鈕
點(diǎn)擊刪除按鈕袖裕，會(huì)出現(xiàn)彈框詢(xún)問(wèn)是否刪除
選中刪除，則刪除樹(shù)節(jié)點(diǎn)（最上層的父節(jié)點(diǎn)不可刪除）
1:在views底下新建一個(gè)test文件夾
里面新建一個(gè)vue文件和一個(gè)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>
//調(diào)用接口
// import { deleteSubject } from "@/api/data/organ";
export default {
data() {
return {
setTree: [],
defaultProps: {
children: "children",
label: "organName",
},
treeData: [],
organList: [],
};
},
created() {
//加載部門(mén)管理節(jié)點(diǎn)接口定義
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("此操作將永久刪除該條目, 是否繼續(xù)?", "提示", {
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);
// 發(fā)請(qǐng)求刪除
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));
},
//部門(mén)管理節(jié)點(diǎn)接口定義
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;
});
},
//對(duì)json的格式的轉(zhuǎn)化
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) {
//判斷是否為兒子節(jié)點(diǎn)
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) {
//有兒子節(jié)點(diǎn)則遞歸
this.data2treeDG(datas, childrenArray);
}
}
return dataArray;
},
//調(diào)用刪除接口
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>
渲染：
往期干貨：
