vue3使用递归组件渲染层级结构

先看看是不是你想要的:

当有层级去渲染的时候,嵌套的层级不明确,这时只能通过递归组件去渲染。

数据如下:

通过判断subCatalog这个字段的长度是否大于0来确定是否有下级。

上代码:(代码是使用uniapp开发的,view标签可进行更换)

复制代码
父组件
<template>
    <view>
        <my-tree
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            :open="openFirst[index]"
            @toggleOpen="toggleOpenFirst(index)"
        />
    </view>
</template>

<script setup>
import myTree from './components/myTree.vue';
import { ref, watch } from 'vue';

const props = defineProps({
    list: { // 展示的层级数据
        type: Array,
        default: []
    }
})

const openFirst = ref([]); // 控制第一级的展开状态

watch(() => props.list, (val) => {
    if (val.length > 0) {
        openFirst.value = new Array(val.length).fill(false);
    }
})


const toggleOpenFirst = (index) => {
    openFirst.value[index] = !openFirst.value[index]; // 切换第一级的展开状态
};

子组件:
<template>
  <view class="link">
      <view class="linkbg">
          <view class="links">
// 1、item是父组件传递过来的数据
              <view class="links-title" @click="goList(item)">{{ item.name }}</view>
              <uv-icon :class="isOpen ? 'arrow-down' : 'arrow-right'" name="arrow-down" v-if="item.subCatalog.length" @click="toggleOpen(item)"></uv-icon>
          </view>
          <Transition>
              <view v-if="isOpen">
                  <view v-for="(subItem, index) in item.subCatalog" :key="subItem.id">
// 调用自身,1处的item便是subItem了
                      <my-tree
                          :item="subItem"
                          :open="openTwo[index]"
                          @toggleOpen="toggleSubOpen(index)"
                      />
                  </view>
              </view>
          </Transition>
      </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  item: {
      type: Object,
      required: true,
  },
  open: {
      type: Boolean,
      default: false,
  },
});

const emit = defineEmits(['toggleOpen']);

const isOpen = ref(props.open); // 根据 props.open 初始化
const openTwo = ref(new Array(props.item.subCatalog.length).fill(false)); // 初始化子项的展开状态

const goList = (val) => {
}

const toggleOpen = (val) => {
  isOpen.value = !isOpen.value; // 切换当前项的展开状态
  emit('toggleOpen', props.item); // 触发事件
};

const toggleSubOpen = (index) => {
  openTwo.value[index] = !openTwo.value[index]; // 切换子项的展开状态
};

</script>

递归组件的思想,便是和使用递归方法一样,自身去调用自身,以达到遍历每一项的数据。

相关推荐
清岚_lxn2 小时前
原生SSE实现AI智能问答+Vue3前端打字机流效果
前端·javascript·人工智能·vue·ai问答
ZoeLandia2 小时前
Element UI 设置 el-table-column 宽度 width 为百分比无效
前端·ui·element-ui
橘子味的冰淇淋~3 小时前
解决 vite.config.ts 引入scss 预处理报错
前端·vue·scss
萌萌哒草头将军4 小时前
💎这么做,cursor 生成的代码更懂你!💎
javascript·visual studio code·cursor
小小小小宇4 小时前
V8 引擎垃圾回收机制详解
前端
lauo5 小时前
智体知识库:ai-docs对分布式智体编程语言Poplang和javascript的语法的比较(知识库问答)
开发语言·前端·javascript·分布式·机器人·开源
拉不动的猪5 小时前
设计模式之------单例模式
前端·javascript·面试
一袋米扛几楼985 小时前
【React框架】什么是 Vite?如何使用vite自动生成react的目录?
前端·react.js·前端框架
Alt.95 小时前
SpringMVC基础二(RestFul、接收数据、视图跳转)
java·开发语言·前端·mvc
lorogy6 小时前
【VSCode配置】运行springboot项目和vue项目
vue.js·spring boot·vscode