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>  {{ 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/77152451getJsonTree(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.cnthis.treeAddIcon(data[i].children)} else {data[i].icon = "iconfont icon-wenjian";}}}}}
</script>
<style>//去除横向滚动条.treeDemo .el-scrollbar__wrap {overflow-x: hidden;}
</style>

效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！