twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 00:18:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化用户管理左侧部门树的布局

Browse Source
This commit is contained in:
xiaoxian521 2024-09-24 11:52:16 +08:00
parent 281675bdaf
commit 384c789fc0
1 changed files with 51 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/views/system/user/tree.vue
View File

@ -96,7 +96,7 @@ defineExpose({ onTreeReset });
<template> <template>
<div <div
v-loading="treeLoading" v-loading="treeLoading"
class="h-full bg-bg_color overflow-auto" class="h-full bg-bg_color overflow-hidden relative"
:style="{ minHeight: `calc(100vh - 141px)` }" :style="{ minHeight: `calc(100vh - 141px)` }"
> >
<div class="flex items-center h-[34px]"> <div class="flex items-center h-[34px]">
@ -151,54 +151,56 @@ defineExpose({ onTreeReset });
</el-dropdown> </el-dropdown>
</div> </div>
<el-divider /> <el-divider />
<el-tree <el-scrollbar height="calc(90vh - 88px)">
ref="treeRef" <el-tree
:data="treeData" ref="treeRef"
node-key="id" :data="treeData"
size="small" node-key="id"
:props="defaultProps" size="small"
default-expand-all :props="defaultProps"
:expand-on-click-node="false" default-expand-all
:filter-node-method="filterNode" :expand-on-click-node="false"
@node-click="nodeClick" :filter-node-method="filterNode"
> @node-click="nodeClick"
<template #default="{ node, data }"> >
<span <template #default="{ node, data }">
:class="[ <div
'pl-1', :class="[
'pr-1', 'rounded',
'rounded', 'flex',
'flex', 'items-center',
'items-center', 'select-none',
'select-none', 'hover:text-primary',
'hover:text-primary', searchValue.trim().length > 0 &&
searchValue.trim().length > 0 && node.label.includes(searchValue) &&
node.label.includes(searchValue) && 'text-red-500',
'text-red-500', highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
highlightMap[node.id]?.highlight ? 'dark:text-primary' : '' ]"
]" :style="{
:style="{ color: highlightMap[node.id]?.highlight
color: highlightMap[node.id]?.highlight ? 'var(--el-color-primary)'
? 'var(--el-color-primary)' : '',
: '', background: highlightMap[node.id]?.highlight
background: highlightMap[node.id]?.highlight ? 'var(--el-color-primary-light-7)'
? 'var(--el-color-primary-light-7)' : 'transparent'
: 'transparent' }"
}" >
> <IconifyIconOffline
<IconifyIconOffline :icon="
:icon=" data.type === 1
data.type === 1 ? OfficeBuilding
? OfficeBuilding : data.type === 2
: data.type === 2 ? LocationCompany
? LocationCompany : Dept
: Dept "
" />
/> <span class="!w-[120px] !truncate" :title="node.label">
{{ node.label }} {{ node.label }}
</span> </span>
</template> </div>
</el-tree> </template>
</el-tree>
</el-scrollbar>
</div> </div>
</template> </template>