介绍

本文档主要用于描述 ShadcnTree 组件的一些特性和用法。

用法

查看代码

<template>
  <ShadcnTree v-model="value" :data="data"/>
</template>

多选 (multiple)

查看代码

<template>
  <ShadcnTree v-model="value" multiple :data="data"/>
</template>

选择框 (checkable)

查看代码

<template>
  <ShadcnTree v-model="value" multiple checkable :data="data"/>
</template>

级联选择 (cascade)

查看代码

<template>
  <ShadcnTree v-model="value" cascade checkable :data="data"/>
</template>

懒加载 (lazy)

查看代码

<template>
  <ShadcnTree v-model="value" checkable cascade :data="data" :loadData="loadNodeData"/>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
const value = ref([])
const data = reactive<[]>([
  {
    value: 1,
    label: 'Parent Node 1',
    isLeaf: false,
    children: []
  },
  {
    value: 2,
    label: 'Parent Node 2',
    children: [
      { value: '2.1', label: 'Child Node 2.1', children: [] }
    ]
  }
])

const generateChildNodes = (parentValue: string, level: number = 1, maxLevel: number = 3): any[] => {
  if (level >= maxLevel) {
    return []
  }

  const count = Math.floor(Math.random() * 3) + 1
  return Array.from({ length: count }, (_, index) => {
    const value = `${ parentValue }.${ index + 1 }`
    return {
      value,
      label: `Node ${ value }`,
      isLeaf: level === maxLevel - 1,
      children: []
    }
  })
}
const loadNodeData = (item: any, callback: (children: any[]) => void) => {
  setTimeout(() => {
    const level = 0
    const children = generateChildNodes(item.value, level)
    callback(children)
  }, 1000)
}
</script>

禁用 (disabled)

查看代码

<template>
  <ShadcnTree v-model="value" :data="data"/>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
const value = ref([])
const data = reactive([
  {
    value: 1,
    label: 'Parent Node 1',
    children: [
      { value: '1.1', label: 'Child Node 1.1' },
      {
        value: '1.2',
        label: 'Child Node 1.2',
        children: [
          { value: '1.2.1', label: 'Child Node 1.2.1' }
        ]
      }
    ]
  },
  {
    value: 2,
    label: 'Parent Node 2',
    disabled: true,
    children: [
      { value: '2.1', label: 'Child Node 2.1' }
    ]
  }
])
</script>

显示线 (show-line)

查看代码

<template>
  <ShadcnTree v-model="value" show-line checkable :data="data"/>
</template>

自定义 Label 插槽

查看代码

<template>
  <ShadcnTree v-model="value"
              checkable
              cascade
              :data="data">
    <template #label="{ node }">
      <div class="flex items-center gap-2">
        <span class="text-sm font-medium">{{ node.label }}</span>
        <span class="text-xs text-gray-500">({{ node.value }})</span>
      </div>
    </template>
  </ShadcnTree>
</template>

<script setup>
import { ref } from "vue"
const value = ref([])
const data = [
    {
      value: 1,
      label: 'Parent Node 1',
      children: [
        {value: 2, label: 'Child Node 1.1'},
        {
          value: 3,
          label: 'Child Node 1.2',
          children: [
            {value: 4, label: 'Child Node 1.2.1'}
          ]
        }
      ]
    },
    {
      value: 5,
      label: 'Parent Node 2',
      children: [
        {value: 6, label: 'Child Node 2.1'}
      ]
    }
  ]
</script>

自定义 Expand/Collapse 插槽

查看代码

<template>
  <ShadcnTree v-model="value" :data="data">
    <template #expand>O</template>
    <template #collapse>C</template>
  </ShadcnTree>
</template>

<script setup>
import { ref } from "vue"
const value = ref([])
const data = [
{
  value: 1,
  label: 'Parent Node 1',
  children: [
    {value: 2, label: 'Child Node 1.1'},
    {
      value: 3,
      label: 'Child Node 1.2',
      children: [
        {value: 4, label: 'Child Node 1.2.1'}
      ]
    }
  ]
},
{
  value: 5,
  label: 'Parent Node 2',
  children: [
    {value: 6, label: 'Child Node 2.1'}
  ]
}
]
</script>

树 (Tree) 属性

树节点 (Tree Node) 属性

树 (Tree) 插槽

树 (Tree) 事件