free-tree-list.vue

<template>
  <li>
     <span @click="toggle(model.id)">
         <i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i>
         <i v-if="!isFolder" class="icon file-text"></i>
         {{ model.menuName }}
     </span>
    <ul style="padding-left: 16px" :class="{slideDown:!open,slideUp:open}" v-show="open" v-if="isFolder">
      <free-tree-list @selectCaputure="onselect" v-for="item in model.children" :model="item" :key="item.id"></free-tree-list>
    </ul>
  </li>
</template>
<script>
  export default {
    name: 'free-tree-list',
    props: ['model'],
    data() {
      return {
        open: false
      }
    },
    computed: {
      isFolder: function() {
        return this.model.children && this.model.children.length
      }
    },
    methods: {
      toggle: function(id) {
        this.$emit('selectCaputure',id)
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      onselect(id){
        this.$emit('selectCaputure',id);
      }
    }
  }
</script>
<style>
  ul {
    list-style: none;
  }
  i.icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    vertical-align: middle;
    background-size: cover;
  }
  .icon.folder {
    background-image: url(/src/assets/文件夹1.png);
  }
  .icon.folder-open {
    background-image: url(/src/assets/文件夹2.png);
  }
  .icon.file-text {
    background-image: url(/src/assets/文件.png);
  }
  .tree-menu li {
    line-height: 1.5;
  }
  .tree-menu li span{
    cursor: pointer;
    display: inline-block;
    line-height: 30px;
  }
  .slideDown{
    /* overflow-y: hidden;
     max-height: 500px; !* approximate max height *!
     transition-property: all;
     transition-duration: 2s;
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
    max-height: 0px;
    overflow-y: hidden;
    -webkit-transition: max-height 0.8s ease-in-out;
    -moz-transition: max-height 0.8s ease-in-out;
    -o-transition: max-height 0.8s ease-in-out;
    transition: max-height 0.8s ease-in-out;
  }
  .slideUp{
    max-height: 300px ;
  }
</style>

free-tree.vue

<template>
  <div class="tree-menu">
    <ul v-for="menuItem in allData" :key="menuItem.id">
      <free-tree-list @selectCaputure="onselect" :model="menuItem"></free-tree-list>
    </ul>
  </div>
</template>
<script>
  import freeTreeList from './free-tree-list.vue'
  export default {
    props:{
      allData:{
        type:Array,
        default:[]
      }
    },
    components: {
      freeTreeList
    },
    data() {
      return {

      }
    },
    methods:{
      onselect(id){
        this.$emit('selectCaputure',id);
      }
    }
  }
</script>

App.vue(调用)

<template>
  <div id="app">
    <free-tree @selectCaputure="onselect" :allData="myData" class="trees"></free-tree>
  </div>
</template>

<script>
  var myData = [
    {
      'id': '1',
      'menuName': '一级-01',
      'menuCode': '10',
      'children': [
        {
          'menuName': '二级-01',
          'menuCode': '11',
          'id': '11'
        },
        {
          'menuName': '二级-02',
          'menuCode': '12',
          'id': '12',
          'children': [
            {
              'menuName': '三级-02',
              'menuCode': '121',
              'id': '121'
            },
            {
              'menuName': '三级-03',
              'menuCode': '122',
              'id': '122'
            }
          ]
        },
        {
          'menuName': '二级-03',
          'menuCode': '13',
          'id': '13'
        }
      ]
    },
    {
      'id': '2',
      'menuName': '一级-02',
      'menuCode': ''
    },
    {
      'id': '3',
      'menuName': '一级-03',
      'menuCode': '30',
      'children': [
        {
          'menuName': '二级-01',
          'menuCode': '31',
          'id': '31'
        },
        {
          'menuName': '二级-02',
          'menuCode': '32',
          'id': '32',
          'children': []
        }
      ]
    },
    {
      'id': '4',
      'menuName': '一级-04',
      'menuCode': '',
      'children': []
    }
  ];
  import freeTree from './free-tree'
  export default {
    name: 'app',
    methods:{
      onselect(id){
        console.log(id);
      }
    },
    data () {
      return {
        myData:myData
      }
    },
    components:{
      freeTree
    }
  }
</script>
<style lang="scss">
.trees{
  margin: 20px;
}
</style>