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