ZF/plus-ui
1
0
Fork 0
mirror of https://gitee.com/JavaLionLi/plus-ui.git synced 2026-05-16 12:17:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

update 优化 左侧树结构增加可折叠按钮

Browse Source 
update 优化 左侧树结构数据过多支持上下滑动
This commit is contained in:
疯狂的狮子Li
2026-03-26 10:09:46 +08:00
parent 2502de3081
commit 8469c254af
7 changed files with 277 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/UserSelect/index.vue
View File

@@ -4,29 +4,33 @@
<div class="p-2 user-select-shell">
<el-row :gutter="12" class="selector-layout">
<!-- 部门树 -->
<el-col :lg="5" :xs="24">
<el-card shadow="hover" class="side-panel selector-card selector-side-card">
<el-col :lg="treeCollapsed ? 1 : 5" :xs="24" class="tree-panel-col" :class="{ 'is-collapsed': treeCollapsed }">
<el-card shadow="hover" class="side-panel tree-panel-shell selector-card selector-side-card" :class="{ 'is-collapsed': treeCollapsed }">
<template #header>
<div class="table-heading">
<h3>部门结构</h3>
<div class="panel-heading search-panel-toggle tree-panel-header" :class="{ 'is-collapsed': treeCollapsed }" @click.stop="treeCollapsed = !treeCollapsed">
<div v-show="!treeCollapsed" class="table-heading">
<h3>部门结构</h3>
</div>
</div>
</template>
<el-input v-model="deptName" class="selector-dept-input" placeholder="请输入部门名称" prefix-icon="Search" clearable />
<el-tree
ref="deptTreeRef"
class="selector-tree"
node-key="id"
:data="deptOptions"
:props="{ label: 'label', children: 'children' } as any"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
<template v-if="!treeCollapsed">
<el-input v-model="deptName" class="selector-dept-input" placeholder="请输入部门名称" prefix-icon="Search" clearable />
<el-tree
ref="deptTreeRef"
class="selector-tree"
node-key="id"
:data="deptOptions"
:props="{ label: 'label', children: 'children' } as any"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
</template>
</el-card>
</el-col>
<el-col :lg="19" :xs="24">
<el-col :lg="treeCollapsed ? 23 : 19" :xs="24" class="tree-content-col" :class="{ 'is-tree-collapsed': treeCollapsed }">
<div class="p-2user-select-main">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch">
@@ -144,6 +148,7 @@ const showSearch = ref(true);
const total = ref(0);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const deptName = ref('');
const treeCollapsed = ref(false);
const deptOptions = ref<DeptTreeVO[]>([]);
const selectUserList = ref<UserVO[]>([]);
@@ -328,8 +333,10 @@ defineExpose({
</script>
<style lang="scss" scoped>
@use '@/assets/styles/components/page-shell' as pageShell;
@use '@/assets/styles/components/selector-dialog' as selectorDialog;
@include pageShell.collapsible-tree-layout(992px);
@include selectorDialog.shell-gap('.user-select-shell', '.user-select-main');
@include selectorDialog.card-shell;
@include selectorDialog.selector-header-tags(992px);