refactor(useTableScroll): 重构表格滚动高度计算逻辑，适配表头高度扣除
1. 优化滚动高度计算方式，改为容器总高减去表头和分页器高度，计算更准确 2. 新增nextTick等待DOM渲染完成后再进行尺寸测量 3. 调整默认最小高度为100px，优化变量命名和注释 4. 简化菜单页面的模板代码格式，统一代码风格 5. 更新useTableScroll的调用参数，移除旧的自定义paginationHeight传参
This commit is contained in:
andyesfly committed
1 parent
4048aeb6fb
commit
026ec34471
2 files changed
+66
-90
No files matched your search
@@ -3,86 +3,59 @@
|
||||
<a-card title="菜单管理">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleAdd()">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
新增菜单
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<div class="table-wrapper" ref="wrapperRef">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="menuList"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }"
|
||||
:expandable="{
|
||||
defaultExpandAllRows: false,
|
||||
showExpandColumn: true,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'menuType'">
|
||||
<a-tag :color="record.menuType === 1 ? 'blue' : 'green'">
|
||||
{{ record.menuType === 1 ? '目录' : '菜单' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<a-table :columns="columns" :data-source="menuList" :loading="loading" :pagination="false" row-key="id"
|
||||
:scroll="{ x: 'max-content', y: tableHeight }" :expandable="{
|
||||
defaultExpandAllRows: false,
|
||||
showExpandColumn: true,
|
||||
}">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'menuType'">
|
||||
<a-tag :color="record.menuType === 1 ? 'blue' : 'green'">
|
||||
{{ record.menuType === 1 ? '目录' : '菜单' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.dataIndex === 'visible'">
|
||||
<a-tag :color="record.visible === 1 ? 'success' : 'default'">
|
||||
{{ record.visible === 1 ? '显示' : '隐藏' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'visible'">
|
||||
<a-tag :color="record.visible === 1 ? 'success' : 'default'">
|
||||
{{ record.visible === 1 ? '显示' : '隐藏' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleAdd(record)">
|
||||
<PlusOutlined />新增子菜单
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">
|
||||
<EditOutlined />编辑
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定删除该菜单？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="handleDelete(record)"
|
||||
>
|
||||
<a-button type="link" size="small" danger>
|
||||
<DeleteOutlined />删除
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleAdd(record)">
|
||||
<PlusOutlined />新增子菜单
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">
|
||||
<EditOutlined />编辑
|
||||
</a-button>
|
||||
<a-popconfirm title="确定删除该菜单？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>
|
||||
<DeleteOutlined />删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:confirm-loading="modalLoading"
|
||||
width="640px"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<a-modal v-model:open="modalVisible" :title="modalTitle" :confirm-loading="modalLoading" width="640px"
|
||||
@ok="handleSubmit" @cancel="handleCancel">
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="上级菜单" name="parentId">
|
||||
<a-tree-select
|
||||
v-model:value="formData.parentId"
|
||||
:tree-data="parentOptions"
|
||||
:field-names="{ label: 'menuName', value: 'id', children: 'children' }"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
placeholder="请选择上级菜单"
|
||||
/>
|
||||
<a-tree-select v-model:value="formData.parentId" :tree-data="parentOptions"
|
||||
:field-names="{ label: 'menuName', value: 'id', children: 'children' }" allow-clear tree-default-expand-all
|
||||
placeholder="请选择上级菜单" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="菜单类型" name="menuType">
|
||||
@@ -117,12 +90,8 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="可见性" name="visible">
|
||||
<a-switch
|
||||
:checked="formData.visible === 1"
|
||||
checked-children="显示"
|
||||
un-checked-children="隐藏"
|
||||
@change="(checked: boolean) => (formData.visible = checked ? 1 : 0)"
|
||||
/>
|
||||
<a-switch :checked="formData.visible === 1" checked-children="显示" un-checked-children="隐藏"
|
||||
@change="(checked: boolean) => (formData.visible = checked ? 1 : 0)" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
@@ -136,7 +105,7 @@ import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vu
|
||||
import { menuApi } from '@/api/menu';
|
||||
import { useTableScroll } from '@/composables/useTableScroll';
|
||||
|
||||
const { wrapperRef, tableHeight } = useTableScroll({ paginationHeight: 0 });
|
||||
const { wrapperRef, tableHeight } = useTableScroll();
|
||||
|
||||
interface MenuItem {
|
||||
id: number;
|
||||
|
||||
Reference in new issue
Block a user