vue3 tree 层级简单实现

最新推荐文章于 2025-10-29 09:46:17 发布

原创最新推荐文章于 2025-10-29 09:46:17 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

该文章展示了一个使用Vue编写的递归组件，用于渲染树形数据结构。组件接受一个包含`label`和`children`属性的数组列表，并通过`v-for`指令进行遍历，展示每个层级的节点。样式使用了Less，并提供了父页面引入和使用的示例。

<template>
  <div class="tree">
    <div v-for="(item, index) in list" :key="index" class="item">
      <div>{{ item.label }}</div>
      <div class="child">
        <tree :list="item.children" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  });
  // const emits = defineEmits(['change']);

  // function pageChange(page, pageSize) {
  //   const data = { page, pageSize };
  //   emits('change', data);
  // }
</script>
<style scoped lang="less">
  .tree {
    .item {
      margin-left: 10px;

      .child {
        margin-left: 10px;
      }
    }
  }
</style>
<!-- 父页面引入使用
<tree :list="list"></tree>
import tree from '@/components/testOne/tree.vue';
const list = [
  {
    label: '第一层',
    children: [
      {
        label: '第一层子第一层',
        children: [
          {
            label: '第一层子第一层第一层',
          },
        ],
      },
    ],
  },
]; -->