perf: 用户部门树超出高度后添加滚动条

This commit is contained in:
xingyu 2023-01-19 13:36:21 +08:00
parent 372de7a4d5
commit fbb154f93d
2 changed files with 16 additions and 13 deletions

View File

@ -51,6 +51,7 @@ declare module '@vue/runtime-core' {
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScroll: typeof import('element-plus/es')['ElScroll']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']

View File

@ -8,17 +8,19 @@
</div>
</template>
<el-input v-model="filterText" placeholder="搜索部门" />
<el-tree
ref="treeRef"
node-key="id"
default-expand-all
:data="deptOptions"
:props="defaultProps"
:highlight-current="true"
:filter-node-method="filterNode"
:expand-on-click-node="false"
@node-click="handleDeptNodeClick"
/>
<el-scrollbar height="650">
<el-tree
ref="treeRef"
node-key="id"
default-expand-all
:data="deptOptions"
:props="defaultProps"
:highlight-current="true"
:filter-node-method="filterNode"
:expand-on-click-node="false"
@node-click="handleDeptNodeClick"
/>
</el-scrollbar>
</el-card>
<el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
<template #header>
@ -534,8 +536,8 @@ onMounted(async () => {
<style scoped>
.user {
height: 900px;
max-height: 960px;
height: 780px;
max-height: 800px;
}
.card-header {
display: flex;