vue中，多层级children，v-for怎么循环遍历？

Sample_浅浅未央

已于 2024-03-12 10:49:48 修改

阅读量969

点赞数 9

文章标签： vue.js 前端 javascript

于 2024-01-23 17:49:10 首次发布

本文链接：https://blog.csdn.net/u010822903/article/details/135777677

版权

文章描述了在Vue项目中，如何在不知children层级的情况下，使用递归组件结构来遍历并展示多级子项。作者通过`v-for`和递归方式展示了如何在`utils.vue`组件中处理和渲染深层嵌套的内容。

摘要由CSDN通过智能技术生成

工作中遇到一个问题，就是需要在不知道几层children的情况下，一直循环有值的children，其中参考了一篇文章，和自己的修改，完成了这个功能。

<div v-for="cItem in item.children" style="margin-top: 20px">
    <utils :cItem="cItem"></utils>
        <div v-for="ccItem in cItem.children" style="margin-top: 20px">
            <utils :cItem="ccItem"></utils>
            <div v-for="cccItem in ccItem.children" style="margin-top: 20px">
                  <utils :cItem="cccItem"></utils>
            </div>
        </div>
</div>

其中utils 就是我一直想要循环的展示children内容的组件。

最终代码是这样

index.vue中：

<div v-for="item in currentNode">
      <div style="width: 100%">
        <h3 :class="currentId == item.docId ? 'current' : ''">
          {{ item.title }}
        </h3>
        <div class="itemContent" v-html="item.content"></div>
        <utils
          v-for="(cItem, index) in item.children"
          :cItem="cItem"
          :key="index"
          style="margin-top: 20px"
        ></utils>
      </div>
</div>

utils.vue中：

<template>
  <div>
    <h3>{{ cItem.title }}</h3>
    <div
      style="
        margin-top: 10px;
        min-height: 200px;
        border: 0.5px solid rgba(43, 90, 197, 0.5);
        padding: 10px;
      "
      v-html="cItem.content"
    ></div>
    <utils
      v-if="cItem.children"
      v-for="item in cItem.children"
      :cItem="item"
      style="margin-top: 20px"
    ></utils>
  </div>
</template>
<script>
export default {
  name: "utils",
  props: {
    cItem: {
      type: Object,
      default: {},
    },
  },
};
</script>
<style lang="less" scoped></style>

最终展示效果如下：

把左边包含许多层级的chilrden在右边进行展示：

（左边层级）