静态
在文档上选一颗自己想要的树的demo
<template> <div class="grid-content bg-purple"> <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" > </el-tree> </div> </template> <script> export default { data() { return { data: [ { id: 1, label: "一级 2", children: [ { id: 3, label: "二级 2-1", children: [ { id: 4, label: "三级 3-1-1", }, { id: 5, label: "三级 3-1-2", disabled: true, }, ], }, { id: 2, label: "二级 2-2", disabled: true, children: [ { id: 6, label: "三级 3-2-1", }, { id: 7, label: "三级 3-2-2", disabled: true, }, ], }, ], }, ], defaultProps: { children: "children", label: "label", }, }; }, }; </script>
效果是这个样子的
在实际应用之中，需要从后端请求过来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如下：
<template> <div class="grid-content bg-purple"> <el-tree :data="treeData" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" > </el-tree> </div> </template> <script> //调用接口 import { getQuerycheckList } from "@/api/data/organ"; export default { data() { return { setTree: [], defaultProps: { children: "children", label: "organName", }, treeData: [], organList: [], }; }, created() { //加载部门管理节点接口定义 this.getQuerycheckList(); }, methods: { //部门管理节点接口定义 getQuerycheckList() { const params = {}; this.dataLoading = true; getQuerycheckList(params).then((res) => { this.setTree = res.data; this.organList = res.data.map((a) => ({ label: a.organName, value: a.id, })); //debugger; this.getListData(); this.dataLoading = false; }); }, //对json的格式的转化 getListData() { let dataArray = []; this.setTree.forEach(function (data) { // debugger; let parentId = data.parentId; if (parentId === null) { 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, }; childrenArray.push(objTemp); } } dataArrayIndex.children = childrenArray; if (childrenArray.length > 0) { this.data2treeDG(datas, childrenArray); } } return dataArray; }, }, }; </script>
