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'] ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElScroll: typeof import('element-plus/es')['ElScroll']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSkeleton: typeof import('element-plus/es')['ElSkeleton']

View File

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