Vue利用遞歸實現簡單的目錄樹結構

日前，在工做中有一個相似chrome書籤管理器的需求，在調研了iview的Tree組件，Vue-dragging，Vue-drag-tree後發現並不能知足需求，故而計劃本身實現。

本文着重實現樹形結構的展現，拖拽功能的完善後續會完善。

Vue做爲組件化的框架，原則上全部的頁面元素都由數據來進行驅動，要實現template模板的遞歸就須要組件遞歸：

貼出目錄結構

數據結構：

[
  {
    title: 'aaa',
    expand: false,
  },
  {
    title: 'bbb',
    expand: false,
  },
  {
    title: 'ccc',
    expand: true,
    children: [
      {
        title: 'parent 1-1',
        expand: true,
        children: [
          {
            title: 'leaf 1-1-1',
            expand: true,
            children: [
              {
                title: 'leaf 1-1-1',
              },
              {
                title: 'leaf 1-1-2',
              },
            ],
          },
          {
            title: 'leaf 1-1-2',
          },
        ],
      },
      {
        title: 'parent 1-2',
        expand: true,
        children: [
          {
            title: 'leaf 1-2-1',
          },
          {
            title: 'leaf 1-2-1',
          },
        ],
      },
    ],
  },
]

tree組件中核心代碼:

<template>
  <div class="tree">
    <ul>
      <li v-for='a in data'>
        <span v-if="a.children" @click.stop='a.expand=!a.expand' class="tree-icon">點我</span>
        <myTree :data='a.children' v-if='!a.expand'></myTree>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'myTree',
  data() {
    return {
    };
  },
  props: ['data'],
  mounted() {
  },
  methods: {
  },
};
</script>

父組件就很簡單的調用傳參就行了：

<template>
  <div class="catalog-tree">
    <myTree :data='treeData'></myTree>
  </div>
</template>

<script>
import myTree from './tree';

export default {
  name: 'catalogTree',
  data() {
    return {
      treeData: [
        {
          title: 'aaa',
          expand: false,
        },
        {
          title: 'bbb',
          expand: false,
        },
        {
          title: 'ccc',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                  expand: true,
                  children: [
                    {
                      title: 'leaf 1-1-1',
                    },
                    {
                      title: 'leaf 1-1-2',
                    },
                  ],
                },
                {
                  title: 'leaf 1-1-2',
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                },
                {
                  title: 'leaf 1-2-1',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    myTree,
  },
  mounted() {
  },
  methods: {
  },
};
</script>

至此，簡單的Vue目錄樹就完成了，拖拽等功能還在完善中，敬請期待！