Vue-component | 极其简易Tree列表

日常开发中积累了不少可能对一些开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的一些零零乱乱的东西做一些总结，反省自己的同时也便于思考一些更优的方法，提升下开发思维😉😉😉。
代码传送门（😃感觉有作用的的同学帮忙点下❤️️）

效果截图

这是一个简单的树形列表,可展开收起。

Tree.gif

组件结构

由多层列表嵌套组成。

<ul>
    <li>
        <ul>
            <li>...</li>
         </ul>
    </li>
</ul>

核心代码

Tree
最顶层结构

<template>
  <ul>
    <item :model="model" />
  </ul>
</template>
<script>
import Item from './Item'
export default {
  name: 'j-tree',
  components: { Item },
  props: {
    model: Object
  }
}
</script>

Item
递归调用自己的核心

<template>
  <li>
    <div @click="toggle">
      {{model.title}}
      <span>[{{isOpen?"-":"+"}}]</span>
    </div>
    <ul v-show="isOpen" class="item">
      //    递归组件自己本身，要记得加上name，不然找不到自己。
      <item v-for="(item, index) in model.children" :key="index" :model="item" />
    </ul>
  </li>
</template>
<script>
export default {
  name: 'item',
  components: {},
  props: {
    model: Object
  },
  data () {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle () {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

传入的数据格式

treeData: {
        title: '地球',
        children: [
          {
            title: '人'
          },
          {
            title: '水果',
            children: [
              {
                title: '橘子'
              },
              {
                title: '苹果'
              }
            ]
          },
          {
            title: '植物',
            children: [
              {
                title: '四君子',
                expand: true,
                children: [
                  {
                    title: '梅'
                  },
                  {
                    title: '兰'
                  },
                  {
                    title: '竹'
                  }
                ]
              },
              {
                title: '动物',
                children: [
                  {
                    title: '猪🐷'
                  },
                  {
                    title: '狗'
                  }
                ]
              },
              {
                title: '气体',
                children: [
                  {
                    title: '空气',
                    children: [
                      {
                        title: '氧气'
                      }]
                  }]
              }
            ]
          }
        ]
      }

关键点

在这里主要使用的一些技术包括：

后续会持续更新其他一些有用的组件提供参考...