Tree 树

用清晰的层级结构展示信息，可展开或折叠。

何时使用

需要展示层级结构。

基本用法

一级 1

一级 2

二级 2-1

二级 2-2

一级 3

二级 3-1

二级 3-2

三级 3-2-1

一级 4

渲染一棵基本树

<template>
  <c-tree :data="data"></c-tree>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const data = ref([
      {
        label: '一级 1',
        level: 1,
        children: [
          {
            label: '二级 1-1',
            level: 2,
            children: [
              {
                label: '三级 1-1-1',
                level: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级 2',
        level: 1,
        open: true, // 新增
        children: [
          {
            label: '二级 2-1',
            level: 2,
            children: [
              {
                label: '三级 2-1-1',
                level: 3
              }
            ]
          },
          {
            label: '二级 2-2',
            level: 2,
            children: [
              {
                label: '三级 2-2-1',
                level: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级 3',
        level: 1,
        open: true, // 新增
        children: [
          {
            label: '二级 3-1',
            level: 2,
            children: [
              {
                label: '三级 3-1-1',
                level: 3
              }
            ]
          },
          {
            label: '二级 3-2',
            level: 2,
            open: true, // 新增
            children: [
              {
                label: '三级 3-2-1',
                level: 3
              }
            ]
          }
        ]
      },
      {
        label: '一级 4',
        level: 1
      }
    ]);

    return {
      data
    };
  }
});
</script>

Tree 树 ​

何时使用 ​

基本用法 ​

Tree 树

何时使用

基本用法