042原生的自引用方式实现多级数据渲染
给组件新增一个name属性name: 'Tree';
组件内引用自身
<Tree
v-if="
item &&
item.id &&
item.showChildren &&
item.children &&
item.children.length
"
:mixintree="mixintree"
:treenode="item.children"
></Tree>
通过数据判断执行循环终止
完整逻辑代码
<script setup lang="ts">
import {
computed } from 'vue';
import AttrPopover from '../../attr/AttrPopover.vue';
name: 'Tree';
const props = defineProps<{
mixintree: any;
treenode: any;
}>();
const {
treeConfig,
treeType,
isCurrent,
handleClick,
handlerDrop,
handlerDragenter,
handlerDragleave,
handlerDragover,
handlerDragstart,
handlerDragend,
} = props.mixintree;
const trees = computed(() => props.treenode.filter((el: any) => el && el.id));
</script>
<template>
<div v-if="trees && trees.length" :class="`as-trees-${treeType || 'tree'}`">
<div
class="as-trees"
v-for="item in trees"
:key="treeType + item.id"
@drop.stop="handlerDrop($event, item)"
@dragenter.stop="handlerDragenter($event, item)"
@dragleave="handlerDragleave($event, item)"
@dragover.stop.native="handlerDragover($event, item)"
>
<div
v-if="item && item.id"
draggable="true"
@dragstart="handlerDragstart($event, item)"
@dragend="