vue实现多级菜单的功能

子组件如下

<template>
  <li>
    <div @click="toggle" :class="liClass">{{model.menuName}}</div>
    <transition name="slide">
      <ul v-show="open">
        <items v-for="(item,index) in model.childTree" :model="item" :key="index"></items>
      </ul>
    </transition>
  </li>
</template>

<script>
  export default {
    name: "items",
    props:['model'],
    data() {
      return {
        open:false
      }
    },
    methods:{
      toggle() {
        this.open = !this.open
      }
    },
    computed:{
      liClass() {
        let _this = this;
        let option = `level_${this.model.level}`;
        let res = {};
        res[option] = true;
        return res;
      }
    }
  }
</script>

<style scoped lang="scss">
  ul {
    list-style: none;
    text-align: left;
    .level_1 {
      /*border: 1px #ff0000 solid;*/
    }
    .level_2 {
      /*border: 1px #00ff00 solid;*/
      text-indent: 2em;
      /*background: #00ff00;*/
    }
    .level_3 {
      /*border: 1px #0000ff solid;*/
      text-indent: 4em;
      /*background: #0000ff;*/
    }
    .level_4 {
      /*border: 1px #ffff00 solid;*/
      text-indent: 6em;
      /*background: #ffff00;*/
    }
  }
  .slide-enter-active,.slide-leave-active {
    transition: all 0.2s;
  }
  .slide-enter,.slide-leave-to {
    transform: translateY(-20px);
  }
  .slide-enter-to,.slide-leave {
    transform: translateY(0px);
  }
</style>

父组件如下

<template>
  <div class="home">
    <div class="digui">
      <ul>
        <items v-for="(model,index) in list" :model="model" :key="index"></items>
      </ul>
    </div>
  </div>
</template>

<script>
  import items from './items'
  export default {
    name: "Home",
    data() {
      return {
        list: [
          {
            "menuName": "项目管理",
            "level":1,
            "childTree": [{
              "menuName": "项目进度",
              "level":2,
              "childTree": [{
                "menuName": "项目一",
                "level":3,
                "childTree": [{ "menuName": "详细信息","level":4,"childTree":[] }]
              }]
            }, {
              "menuName": "任务安排",
              "level":2,
              "childTree":[]
            }]
          },
          {
            "menuName": "数据统计",
            "level":1,
            "childTree":[]
          },
          {
            "menuName": "人员管理",
            "level":1,
            "childTree":[]
          }]
      }
    },
    components:{
      items
    }
  }
</script>

<style scoped>
</style>

主要代码如上，用到了组件的递归。