ant vue 树形菜单横向显示_快速实现一个简单可复用可扩展的Vue树组件

来源 | https://wintc.top/article/13 大概因为平时工作项目的原因，写了很多次树形组件，越写越觉得可以写得更简单并且更具有复用性、扩展性。树组件的应用场景很多，比如一篇文章的目录、一个公司部门组织情况、思维导图等，其实都可以用树形结构来描述。 本文讲述一下Vue中树组件的简单实现。 树组件在线体验地址：http://wintc.top/laboratory/#/tree。

一、树形数据结构

　　树形数据是指形如以下的数据结构：

[  {
         id: '1',    title: '节点1'    children: [      {
             id: '1-1',        title: '节点1-1'      },      {
             id: '1-2',        title: '节点1-2'      }    ]  },  {
         id: '2',    title: '节点2',    children: [      {
             id: '2-1',        title: '节点2-1'      },      {
             id: '2-2',        title: '节点2-2'      }    ]  },  {
         id: '3',    title: '节点3'  }]

这并不是《数据结构与算法》里严格意义上的树定义，严格的树定义，第一层应该是一个根节点，而此处的第一层就包含了多个节点。 不过这不重要，实用为上，这样的结构或许更加通用(试想，如果第一层是只包含一个节点的树，和标准定义的树又有什么本质区别呢)。 树结构是递归的，它可能有很多级，我们在渲染树结构的时候也采用递归的方式来渲染。

二、Vue树组件实现的两个重要属性

1、组件的name属性

或许我们在平常开发的过程中都很少使用这个属性(至少我是如此)，不过这个属性却有两个很重要的作用，摘自Vue官网：

• 允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

• 指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 ，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

这里我们因为要递归地渲染树形结构，即渲染树节点的时候使用当前组件作为子组件，所