vue2.0+Element-ui应用【Tree树形控件】

自己的treeDemo:

<template>
<div class="treeDemo" style="height: 300px">
<el-scrollbar style="height:100%">
<el-tree :data="treeData" @node-click="handleNodeClick" :expand-on-click-node="false">
<span slot-scope="{ node, data }">
<i :class="node.icon"></i>&nbsp;&nbsp;{{ node.label }}
</span>
</el-tree>
</el-scrollbar>
</div>
</template>

<script>
export default {
data() {
return {
treeData: [],
};
},
created() {
this.actionGetCatalog();
},
methods: {
actionGetCatalog() {
console.log("actionGetCatalog!");
let data=[
{"catalogId": 58,"parentId": -1,"name": "一级目录1"},
{"catalogId": 59,"parentId": 58,"name": "二级目录1"},
{"catalogId": 60, "parentId": 59,"name": "三级目录1"},
{"catalogId": 61,"parentId": 59,"name": "三级目录2"},
{"catalogId": 62, "parentId": 59, "name": "三级目录3"},
{"catalogId": 63, "parentId": 59, "name": "三级目录4"},
{"catalogId": 64, "parentId": 58, "name": "二级目录2"},
{"catalogId": 65, "parentId": 64, "name": "三级目录5"},
{"catalogId": 66, "parentId": 64, "name": "三级目录6"},
{"catalogId": 67, "parentId": -1, "name": "一级目录2"},
{"catalogId": 68, "parentId": 67, "name": "二级目录3"}
];
for (let i = 0; i < data.length; i++) {//把"name"换成"label"
data[i].label = data[i].name;
delete data[i].name;
}
console.log(data);
this.treeData = this.getJsonTree(data, {
id: 'catalogId',
pid: 'parentId',
children: 'children'
});
console.log(this.treeData);
},
handleNodeClick(data) {
console.log("handleNodeClick!");
console.log(data.label);
console.log(data.catalogId);
},
//将json（一般从后台获取）转成jsonTree格式 参考文档：https://blog.csdn.net/unamattin/article/details/77152451
getJsonTree(data, config) {
let id = config.id || 'id', pid = config.pid || 'pid', children = config.children || 'children';
let idMap = [], jsonTree = [];
data.forEach(function (v) {
idMap[v[id]] = v;
});
data.forEach(function (v) {
let parent = idMap[v[pid]];
if (parent) {
!parent[children] && (parent[children] = []);
parent[children].push(v);
} else {
jsonTree.push(v);
}
});
this.treeAddIcon(jsonTree);//循环遍历给tree加图标
return jsonTree;
},
treeAddIcon(data) {
for (let i = 0; i < data.length; i++) {
if (data[i].children) {
data[i].icon = "iconfont icon-wenjianjia";//icon来自阿里巴巴矢量图标库http://iconfont.cn
this.treeAddIcon(data[i].children)
} else {
data[i].icon = "iconfont icon-wenjian";
}
}
}
}
}
</script>
<style>//去除横向滚动条
.treeDemo .el-scrollbar__wrap {
overflow-x: hidden;
}
</style>

效果图：