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>

效果图：