by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: fixed tree search

Browse Source
This commit is contained in:
dap 2024-10-08 16:52:30 +08:00
parent 6cdcc8cbca
commit f873b8ac3e
1 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/web-antd/src/views/system/user/dept-tree.vue
View File

@ -45,13 +45,11 @@ onMounted(reload);
<template> <template>
<Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active> <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
<div <div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
class="bg-background flex h-full flex-col overflow-y-auto rounded-lg p-[8px]" <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
> <div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
<div>
<InputSearch <InputSearch
v-model:value="searchValue" v-model:value="searchValue"
class="mb-[8px]"
placeholder="Search" placeholder="Search"
size="small" size="small"
> >
@ -62,32 +60,37 @@ onMounted(reload);
</template> </template>
</InputSearch> </InputSearch>
</div> </div>
<Tree <div class="px-[8px]">
v-bind="$attrs" <Tree
v-if="deptTreeArray.length > 0" v-bind="$attrs"
v-model:selected-keys="selectDeptId" v-if="deptTreeArray.length > 0"
:class="$attrs.class" v-model:selected-keys="selectDeptId"
:field-names="{ title: 'label', key: 'id' }" :class="$attrs.class"
:show-line="{ showLeafIcon: false }" :field-names="{ title: 'label', key: 'id' }"
:tree-data="deptTreeArray" :show-line="{ showLeafIcon: false }"
:virtual="false" :tree-data="deptTreeArray"
default-expand-all :virtual="false"
@select="$emit('select')" default-expand-all
> @select="$emit('select')"
<template #title="{ label }"> >
<span v-if="label.indexOf(searchValue) > -1"> <template #title="{ label }">
{{ label.substring(0, label.indexOf(searchValue)) }} <span v-if="label.indexOf(searchValue) > -1">
<span style="color: #f50">{{ searchValue }}</span> {{ label.substring(0, label.indexOf(searchValue)) }}
{{ <span style="color: #f50">{{ searchValue }}</span>
label.substring(label.indexOf(searchValue) + searchValue.length) {{
}} label.substring(label.indexOf(searchValue) + searchValue.length)
</span> }}
<span v-else>{{ label }}</span> </span>
</template> <span v-else>{{ label }}</span>
</Tree> </template>
<!-- 仅本人数据权限 可以考虑直接不显示 --> </Tree>
<div v-else class="mt-5"> <!-- 仅本人数据权限 可以考虑直接不显示 -->
<Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" /> <div v-else class="mt-5">
<Empty
:image="Empty.PRESENTED_IMAGE_SIMPLE"
description="无部门数据"
/>
</div>
</div> </div>
</div> </div>
</Skeleton> </Skeleton>