042原生的自引用方式实现多级数据渲染

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;

// 强制处理子节点数据中混入null的问题
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="