递归组件实现tree树

myLIst.vue 

<template>
  <div>
    <my-trees :list="list"></my-trees>
  </div>
</template>
<script>
import myTrees from './treeMenus'
export default {
  components: {
    myTrees
  },
  data () {
    return {
      list: [
        {
          name: '黄焖鸡米饭111111111',
          cList: [
            { name: '二级黄焖鸡' },
            {
              name: 'one chicken',
              cList: [
                { name: '三级黄焖鸡3333', cList: [{ name: '四级黄焖鸡' }] }
              ]
            }
          ]
        },
        // { name: '2222222222' },
        // {
        //   name: '黄焖鸡米饭33333333',
        //   cList: [{ name: '二级黄焖鸡' }, { name: 'one chicken' }]
        // }
      ]
    }
  },
  methods: {}
  
}
</script>

 treeMenus.vue

<template>
 
  <ul>
    <li v-for="(item,index) in list" :key="index">
      <p @click="changeStatus(index)">{{item.name}}</p>
      <tree-menus v-if="scopesDefault[index]" :list="item.cList"></tree-menus>
    </li>
  </ul>
 
</template>
 <style>
ul {
  margin-top: 50px;
  padding-left: 20px !important;
}
</style>
<script>
// import treeMenus from './treeMenu2.vue'
export default {
  name: 'treeMenus',
  props: {
    list: Array
  },
  data() {
    return {
      scopesDefault: [],
      scopes: []
    }
  },
 
  methods: {
    changeStatus(index) {
      console.log(index);
      if (this.scopesDefault[index] == true) {
        this.$set(this.scopesDefault, index, false)
      } else {
        this.$set(this.scopesDefault, index, this.scopes[index])
      }
    },
    scope() {
      this.list.forEach((item, index) => {
        this.scopesDefault[index] = false
        if ('cList' in item) {
          this.scopes[index] = true
          console.log(item, index)
        } else {
          this.scopes[index] = false
        }
      })
      console.log(this.scopesDefault)
    }
  },
  created() {
    this.scope()
  }
}
</script>

使用递归组件 

<template>
    <div class="redhare-dashboard">
       
            <div class="step-two mt10">
            
            <myList></myList>
            </div>
      
    </div>

</template>

<script>
  import {mapState, mapGetters, mapMutations, mapActions } from 'vuex'
  import {getCookie} from "../../pack/common/js/utils";
  import FormOrganization from './module/list'
   import myList from './module/myLIst'
  export default {
      components: {
      FormOrganization,
      myList
    },
    name: "init",
    
  }
</script>