vue组件递归渲染——vue树形控件超级简单版本

蠢蠢的效果图，

下面是源码：

树结构组件代码

<template>
  <div class="try">
    <ul>
      <li v-for="item in children" :key="item.id">
        <el-button type="primary" @click="change(item)" :disabled="!item.children">
          <span>
            <i style="font-size: 18px;" class="el-icon-arrow-up" v-if="item.show"></i>
            <i style="font-size: 18px;" class="el-icon-arrow-down" v-else></i>
          </span>
          <span>{{item.id}}</span>
        </el-button>
        <new-try v-if="item.children && item.show" :children="item.children"></new-try>
      </li>
    </ul>
  </div>
</template>v-else

<script>
export default {
  name: 'NewTry',
  props: {children: Array},
  data () {
    return {
    }
  },
  methods: {
    change (item) {
      item.show = !item.show
    }
  }
}
</script>

然后是父组件引用代码：

<template>
  <div>
    <new-try :children="tryData"></new-try>
  </div>
</template>

<script>
import NewTry from './newTry.vue'
export default {
  components: {NewTry},
  data () {
    return {
      tryData: [
        {id: 0, show: true, children: [{id: 1},{id: 4}]},
        {id: 2, show: false, children: [{id: 5}]},
        {id: 3, show: true, children: [
          {id: 6},
          {id: 7},
          {id: 8, show: false, children: [
            {id: 9},
            {id: 10}
          ]}
        ]}
      ]
    }
  }
}
</script>