树形菜单是开发后台管理系统都绕不过的一个需求，也是各种UI框架都必须具备的组件。实际开发中，大多数时候都是直接拿别人的轮子过来用，但作为一个有追求的程序猿怎么能不知道轮子背后的东西呢？今天，我就基于Vue用两种方式来实现树形菜单。

准备工作

• Vue开发环境

  
  
  父组件.png

• 树形结构的数据

  data: [
    {
      name: 'home',
      path: '/home',
      isExpand: false,
      meta: { text: '首页' }
    },
    {
      name: 'manage',
      path: '/manage',
      isExpand: false,
      meta: {text: '系统管理'},
      children: [
        {
          name: 'staff',
          path: 'staff',
          isExpand: false,
          meta: {text: '员工管理'}
        },
        {
          name: 'role',
          path: 'role',
          isExpand: false,
          meta: {text: '角色管理'}
        },
        {
          name: 'auth',
          path: 'auth',
          isExpand: false,
          meta: {text: '权限管理'}
        },
        {
          name: 'daily',
          path: 'daily',
          isExpand: false,
          meta: {text: '日常管理'},
          children: [
            {
              name: 'attendance',
              path: 'attendance',
              isExpand: false,
              meta: {text: '考勤管理'},
            },
            {
              name: 'performance',
              path: 'performance',
              isExpand: false,
              meta: {text: '绩效管理'}
            }
          ]
        }
      ]
    },
    {
      name: 'finance',
      path: '/finance',
      isExpand: false,
      meta: {text: '财务管理'},
      children: [
        {
          name: 'income',
          path: 'income',
          isExpand: false,
          meta: {text: '收入管理'},
        },
        {
          name: 'expense',
          path: 'expense',
          isExpand: false,
          meta: {text: '支出管理'},
        }
      ]
    }
  ]
  

两种实现

1、递归组件

// 子组件
<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index" :class="{'active':!(item.children && item.children.length > 0)}">
      <span class='item'>
        <span class="icon" @click="item.isExpand = !item.isExpand">
          <img v-if="item.children && item.children.length > 0 && !item.isExpand" src="../assets/img/icon_arrow_right.png">
          <img v-else-if="item.children && item.children.length > 0 && item.isExpand" src="../assets/img/icon_arrow_down.png">
        </span>
        <span class="title"
          @click="handleClick(item)">{{item.meta.text}}</span>
      </span>
      <!-- 递归组件 -->
      <tree-one v-show="item.isExpand" v-if="item.children && item.children.length > 0" :treeData="item.children"></tree-one>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeOne',
  props: {
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    handleClick(){}
  }
}
</script>

2、render函数

// 子组件
<script>
  import img1  from '../assets/img/icon_arrow_right.png'
  import img2 from '../assets/img/icon_arrow_down.png'
  export default {
    name: 'TreeTwo',
    props: {
      treeData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    render(r){
      return this.elements(this.treeData,r)
    },
    methods: {
      elements(data,r){
        return r('ul',[
          data.map(item => {
            if (item.children && item.children.length > 0) {
              return r('li',{
                'class': {
                  active: !(item.children && item.children.length > 0)
                }
              },[
                r('span',{
                  'class':'item'
                },[
                  r('span',{
                    'class': 'icon',
                    on:{
                      click: () => {
                        item.isExpand = !item.isExpand
                      }
                    }
                  },[
                    r('img',{
                      attrs: {
                        src: item.children && item.children.length > 0 && !item.isExpand ? 
                        img1 : (item.children && item.children.length > 0 && item.isExpand ? img2 : '')
                      }
                    })
                  ]),
                  r('span',{
                    'class': 'title',
                    on: {
                      click: () => {
                        
                      }
                    }
                  },item.meta.text,)
                ]),
                // 递归调用
                item.isExpand ? this.elements(item.children,r): null
              ])
            } else {
              return r('li',item.meta.text)
            }
          })
        ])
      }
    }
  }
</script>

实现效果

效果.png

以上就是用两种方式实现的树组件，重点在于递归的思想，希望对读者有所帮助。详情可以查看源代码：源码