vue中怎么写一个目录

vue中目录的实现方法

方法1：自己封装一个目录组件，递归思想

<template>
  <div class="catalog">
    <aside class="leftCatalog">
      <h4 style="border-bottom: 1px solid #ccc;">目录</h4>
      <tree></tree>
    </aside>
    <div class="right">主要内容展示区域</div>
  </div>
</template>

<script>
export default {
  components: {
    tree: () => import("../components/tree.vue"),
  },
};
</script>

<style scoped>
.catalog {
  display: flex;
}
.leftCatalog {
  width: 180px;
  height: 240px;
  overflow-y: auto;
  background-color: #f5f5f5;
}
.right {
  flex: 1;
}
</style>

tree.vue文件：

<template>
  <div class="catalogBox">
    <!-- 每一个最外层的对象，就会渲染出一个catalogItem-->
    <catalogItem
      class="catalog"
      v-for="(item, index) in list"
      :key="index"
      :itemText="item"
    ></catalogItem>
  </div>
</template>

<script>
import catalogItem from "./treeItem.vue";
export default {
  data() {
    return {
      // 目录数据开始
      list: [
        {
          name: "中国",
          children: [
            {
              name: "湖南",
              children: [
                {
                  name: "长沙",
                  children: [
                    { name: "天心区" },
                    { name: "岳麓区" },
                    { name: "雨花区" },
                    { name: "望城区" },
                    { name: "开福区" },
                  ],
                },
              ],
            },
            {
              name: "广东省",
              children: [
                {
                  name: "深圳市",
                  children: [
                    {
                      name: "福田区",
                    },
                    {
                      name: "南山区",
                    },
                  ],
                },
                {
                  name: "广州市",
                  children: [{ name: "海心区" }, { name: "白云区" }],
                },
              ],
            },
          ],
        },
        {
          name: "日本",
          children: [{ name: "东京" }, { name: "大阪" }],
        },
      ],
    };
  },
  components: { catalogItem },
};
</script>

treeItem.vue文件：

<template>
  <div class="itemBox">
    <!-- 按钮部分 -->
    <template v-if="itemText.children && itemText.children.length">
      <a-icon v-show="!isOpen" type="caret-right" @click="isOpen = !isOpen" />
      <a-icon v-show="isOpen" type="caret-down" @click="isOpen = !isOpen" />
    </template>
    <!-- 每个目录项的内容 -->
    <div class="catalogItem">{{ itemText.name }}</div>
    <!-- 如果有children，就会接着渲染内层目录，内部和自己本身是一样的 -->
    <template v-if="itemText.children && itemText.children.length">
      <treeItem
        v-for="(childItem, childIndex) in itemText.children"
        :key="childIndex"
        :itemText="childItem"
        v-show="isOpen"
        >{{ childItem.name }}</treeItem
      >
    </template>
  </div>
</template>
<script>
export default {
  name: "treeItem",
  props: {
    itemText: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isOpen: false,
    };
  },
};
</script>

<style scoped>
.catalogItem {
  display: inline-block;
  font-size: 12px;
  color: #565656;
  margin: 0;
}
.itemBox {
  padding: 0 0 0 15px;
  margin: 0;
}
</style>

组件treeItem通过name属性，自己引用自己

方法2：使用antd的a-tree属性空间

0;
}
.itemBox {
padding: 0 0 0 15px;
margin: 0;
}

组件treeItem通过name属性，自己引用自己

#### 方法2：使用antd的a-tree属性空间

  <a-tree :tree-data="list"></a-tree>

只不过list中的 name 必须改为 title