Browse Source
- 在 common-ui 包中新增 Tree 组件 - 实现了基本的树形结构展示功能 - 集成了 VbenTree 组件和自定义样式- 添加了空数据时的占位展示pull/6753/head
2 changed files with 26 additions and 0 deletions
@ -0,0 +1 @@ |
|||
export { default as Tree } from './tree.vue'; |
|||
@ -0,0 +1,25 @@ |
|||
<script setup lang="ts"> |
|||
import type { TreeProps } from '@vben-core/shadcn-ui'; |
|||
|
|||
import { Inbox } from '@vben/icons'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { treePropsDefaults, VbenTree } from '@vben-core/shadcn-ui'; |
|||
|
|||
const props = withDefaults(defineProps<TreeProps>(), treePropsDefaults()); |
|||
</script> |
|||
|
|||
<template> |
|||
<VbenTree v-if="props.treeData?.length > 0" v-bind="props"> |
|||
<template v-for="(_, key) in $slots" :key="key" #[key]="slotProps"> |
|||
<slot :name="key" v-bind="slotProps"> </slot> |
|||
</template> |
|||
</VbenTree> |
|||
<div |
|||
v-else |
|||
class="flex-col-center text-muted-foreground cursor-pointer rounded-lg border p-10 text-sm font-medium" |
|||
> |
|||
<Inbox class="size-10" /> |
|||
<div class="mt-1">{{ $t('common.noData') }}</div> |
|||
</div> |
|||
</template> |
|||
Loading…
Reference in new issue