vue-tree树形结构

展示效果：

组件：

<template>
  <ul class="l_tree">
    <li class="l_tree_branch" v-for="item in model" :key="item.fid">
      <div class="l_tree_click">
        <li
          class="l_folder"
          @click="clickSize(item.fid)"
          :class="current === item.fid ? 'current' : 'currentSize'"
          :index="item.fid"
          >
        <button
          type="button"
          class="l_tree_children_btn"
          v-if="item.children"
          @click.stop="toggle(item)"
        >
          {{ !item.show ? "-" : "+" }}
        </button>
        {{ item.name }}</li
        >
      </div>
      <ew-tree
        v-show="!item.show"
        :model="item.children"
        :current="current"
        @change="changeCurrent"
      ></ew-tree>
    </li>
  </ul>
</template>
<script>
export default {
  name: "EwTree",
  props: {
    model: {
      type: Array,
      default() {
        return [];
      },
    },
    current: {
      type: Number,
      default: null,
    },
  },
  methods: {
    toggle(item) {
      var idx = this.model.indexOf(item);
      this.model[idx].show = !item.show
    },
    clickSize(id) {
      this.$emit("change", id);
    },
    changeCurrent(id) {
      this.clickSize(id);
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:before,
*:after {
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
.current {
//   color: #e9c309 !important;
}
.l_tree_container {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 3px #ccc;
  margin: 13px;
  position: relative;
}

.l_tree {
  width: calc(100%);
  padding-left:12px
}
.l_tree_branch {
  width: 100%;
  height: 100%;
  display: block;
  padding: 13px 13px 5px 0px !important;
  position: relative;
}

.l_tree_branch .l_tree_children_btn {
  width: 18px;
  height: 18px;
  background-color: #ccc;
  font-size: 8px;
  text-align: center;
  color: #fff;
  outline: none;
  border: 0;
  cursor: pointer;
  border: 1px solid #bbbec1;
  line-height: 11px;
}

ul.l_tree:before {
  content: "";
  //  border-left: 1px dashed #999999;
  height: calc(100% - 24px);
  position: absolute;
  left: 10px;
  top: 0px;
}
.l_tree,
.l_tree_branch {
  position: relative;
}

.l_tree_branch::after {
  content: "";
  width: 18px;
  height: 0;
//   border-bottom: 1px dashed #bbbec1;
  position: absolute;
  right: calc(100% - 10px);
  top: 24px;
  left: -5px;
}

.l_tree_container > .l_tree::before,
.l_tree_container > .l_tree > .l_tree_branch::after {
  display: none;
}
.l_folder {
  font-size: 14px;
  width: 100%;
  display: inline-block;
  color: #333;
  cursor: pointer;
}
</style>

引入： 

/* DOM：该页面也是一个组件 名称：<MenuList /> */

  <menu-tree
     v-show="item.show"
     :model="treeList"
     :current="current"
     @change="changeCurrent"
    >
 </menu-tree>



import MenuTree from './MenuTree.vue'

props: {
  //菜单列表
  list: {
    type: Array,
    required: true,
    default: () => []
      }
},

data() {
    return {
        treeList:[],
        current:null,
     }
},

created() {
      setTimeout(() => {
         this.treeList = this.list
       }, 500);
    },

components:{
  MenuTree
},

父组件使用MenuList：

/* DOM */
<menu-list :list="menuList"></menu-list>

import MenuList from "./MenuList.vue"

export default {

data() {
    return {
        menuList: [],
        tree_list:[], //邮件夹树
        treeListnode:[], //邮件夹节点
    };
},
created () {
    this.getFolder()
},
methods:{
        async getFolder() {
            let theData = {
                stats: 1,
                type: 0,
            };
            let res = await API.getAllFolders({
                data: theData,
            });
            if (res.code === "S_OK") {
                let data = res["var"];
                this.treeListnode.push(data[i])  
                // 邮件夹树,递归遍历
                this.tree_list = newTreeList(this.treeListnode, 0);
                        function newTreeList(res, parentId = 0) {
                            let treeList = [];
                            res.map(function (item) {
                                if (item.parentId == parentId) {
                                    let children = newTreeList(res, item.fid);
                                    if (children.length > 0) {
                                        item.children = children;
                                    }
                                    treeList.push(item);
                                }
                            });
                            return treeList;
                        }
                this.menuList.push(this.tree_list);
            }
        },
}