Vue递归组件实现多级列表分类

Vue递归组件实现多级列表分类

信息的分类展示

数据格式

const treeObj = {
  name: "电子产品",
  children: [
    {
      name: "电视",
      children: [
        {
          name: "philips",
          children: [
            { name: "philips-A" },
            { name: "philips-B" },
            { name: "philips-C" }
          ]
        },
        {
          name: "Tcl",
          children: [
            { name: "Mac Air" },
            { name: "Mac Pro" },
            {
              name: "ThinlPad",
              children: [
                {
                  name: "ThinlPad-A",
                  children: [
                    { name: "ThinlPad-A-a" },
                    { name: "ThinlPad-A-b" },
                    { name: "ThinlPad-A-c" }
                  ]
                },
                { name: "ThinlPad-B" },
                { name: "ThinlPad-C" },
                { name: "ThinlPad-D" }
              ]
            }
          ]
        },
        { name: "海兴" }
      ]
    },
    {
      name: "电脑",
      children: [{ name: "acer" }, { name: "联想" }, { name: "惠普" }]
    },
    {
      name: "可穿戴的设备",
      children: [
        {
          name: "手环",
          children: [
            { name: "华为B5手环" },
            { name: "小米手环" },
            { name: "iphone手环" }
          ]
        }
      ]
    }
  ]
};

看到这种格式，我想好多人肯定会说，我可以使用v-for的嵌套循环不就完事了。对，没毛病这样的话也可以做，但是如果数据又多加了【很多】级分类呢；使用v-for也能实现，但是代码量是不是太大了呢！也不适合后期的维护，这个时候呢，我们就可以使用我们所说道的【递归组件 】了，使用递归组件，无论你的数据怎么增加我们都不用改动我们的代码。哈哈！！是不是很(๑•̀ㅂ•́)و✧。

那什么是递归呢？

 简单来说就是在组件中内使用组件本身

 下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。

---

基于上面的样式我们可以创建两个组件进行演示

先创建tree.vue 组件

<template>
  <div>
    <div class="header" :style="indent" @click="toogle">
      <span>{{ isShow ? "-" : "+" }}</span>
      <span>{{ title }}</span>
    </div>
    <main v-if="isShow">
      <tree-com
        v-for="(item, index) in list"
        :key="index"
        :title="item.name"
        :list="item.children"
        :depth="depth + 1"
      ></tree-com>
    </main>
  </div>
</template>

<script>
export default {
  name: "tree-com", // 通过组件的自身的name名来实现组件的递归调用
  props: {
    title: {
      type: String,
      default: "名称"
    },
    list: {
      type: Array
    },
    depth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    indent() {
      return `transform: translate(${this.depth * 20}px)`;
    }
  },
  methods: {
    toogle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 50px;
  background-color: salmon;
  text-align: center;
  line-height: 50px;
}
</style>

然后在创建User.vue 把上面的tree.vue导入

<template>
  <div class="user">
    <tree-com
      :title="treeObj.name"
      :list="treeObj.children"
      :depth="0"
    ></tree-com>
  </div>
</template>

<script>
import TreeCom from "../components/tree";
/**
 * 模拟一个树形结构图
 */
const treeObj = {
  name: "电子产品",
  children: [
    {
      name: "电视",
      children: [
        {
          name: "philips",
          children: [
            { name: "philips-A" },
            { name: "philips-B" },
            { name: "philips-C" }
          ]
        },
        {
          name: "Tcl",
          children: [
            { name: "Mac Air" },
            { name: "Mac Pro" },
            {
              name: "ThinlPad",
              children: [
                {
                  name: "ThinlPad-A",
                  children: [
                    { name: "ThinlPad-A-a" },
                    { name: "ThinlPad-A-b" },
                    { name: "ThinlPad-A-c" }
                  ]
                },
                { name: "ThinlPad-B" },
                { name: "ThinlPad-C" },
                { name: "ThinlPad-D" }
              ]
            }
          ]
        },
        { name: "海兴" }
      ]
    },
    {
      name: "电脑",
      children: [{ name: "acer" }, { name: "联想" }, { name: "惠普" }]
    },
    {
      name: "可穿戴的设备",
      children: [
        {
          name: "手环",
          children: [
            { name: "华为B5手环" },
            { name: "小米手环" },
            { name: "iphone手环" }
          ]
        }
      ]
    }
  ]
};
export default {
  name: "User",
  components: { TreeCom },
  data() {
    return { treeObj };
  }
};
</script>