public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-23 21:18:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化表格滚动设置，调整样式以提升用户体验

Browse Source
This commit is contained in:
zhangtao
2025-01-08 21:50:12 +08:00
parent d72cc6ddfb
commit 0b4d68b3cc
17 changed files with 62 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/common/file/index.vue
+6 -3
View File
@@ -50,8 +50,10 @@
</a-breadcrumb>
<!-- 文件列表 -->
<a-table :columns="columns" :data-source="fileList"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :loading="loading"
<a-table :columns="columns"
:data-source="fileList"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:loading="loading"
:pagination="{
current: 1,
pageSize: 10,
@@ -59,7 +61,8 @@
showQuickJumper: true,
total: fileList.length,
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 总共 ${total} 条`
}" :style="{ minHeight: '550px' }">
}"
:style="{ minHeight: '550px' }">
<!-- 文件名列 -->
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
frontend/src/views/dashboard/analysis.vue
+4 -1
View File
@@ -237,7 +237,10 @@
</a-col>
</a-row>
<div style="margin-top: 10px;">
<a-table row-key="index" size="small" :columns="searchColumns" :data-source="searchData"
<a-table row-key="index"
size="small"
:columns="searchColumns"
:data-source="searchData"
:pagination="{ pageSize: 5 }">
<template v-slot:bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'keyword'">
frontend/src/views/monitor/cache/index.vue
Vendored
-12
View File
@@ -73,7 +73,6 @@
<a-table
:loading="loading"
:dataSource="cacheNames"
:scroll="{ y: tableHeight }"
:pagination="false"
rowKey="cache_name"
>
@@ -109,7 +108,6 @@
<a-table
:loading="subLoading"
:dataSource="cacheKeys.map(key => ({ cacheKey: key }))"
:scroll="{ y: tableHeight }"
:pagination="false"
rowKey="cacheKey"
>
@@ -182,7 +180,6 @@ const cacheForm = ref<CacheForm>({
const loading = ref(true);
const subLoading = ref(false);
const nowCacheName = ref('');
const tableHeight = ref(window.innerHeight - 350);
const cache = ref<CacheMonitor>({
info: {} as RedisInfo,
command_stats: [],
@@ -424,22 +421,13 @@ const initCharts = () => {
usedmemoryInstance.setOption(usedMemoryOption);
};
// 窗口大小变化处理
const handleResize = () => {
tableHeight.value = window.innerHeight - 800;
commandstatsInstance?.resize();
usedmemoryInstance?.resize();
};
// 生命周期钩子
onMounted(() => {
getCacheNameList();
getInfo();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
commandstatsInstance?.dispose();
usedmemoryInstance?.dispose();
});
frontend/src/views/monitor/online/index.vue
+1 -1
View File
@@ -43,7 +43,7 @@
:columns="columns"
:data-source="tableData"
:loading="loading"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:scroll="{ x: 500 }"
:style="{ minHeight: '500px' }"
:pagination="pagination">
<template #bodyCell="{ column, record, index }">
frontend/src/views/monitor/server/index.vue
+1 -1
View File
@@ -179,7 +179,7 @@
:dataSource="server.disks"
:pagination="false"
:bordered="true"
:scroll="{ x: 'max-content' }"
:scroll="{ x: 500 }"
:rowKey="(record) => record.dir_name"
>
<a-table-column
frontend/src/views/system/config/index.vue
+9 -3
View File
@@ -37,9 +37,15 @@
</a-space>
</template>
<a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource"
:loading="tableLoading" :scroll="{ x: 500, y: 'calc(100vh - 500px)' }" :row-selection="rowSelection"
:pagination="false" :style="{ minHeight: '500px' }">
<!-- 树形表格 -->
<a-table :rowKey="record => record.id"
:columns="columns"
:data-source="dataSource"
:loading="tableLoading"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:row-selection="rowSelection"
:pagination="false"
:style="{ minHeight: '500px' }">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
frontend/src/views/system/log/SelectorModal.vue
+7 -6
View File
@@ -38,7 +38,8 @@
<a-card title="用户列表" :bordered="true" :headStyle="{ borderBottom: 'none', padding: '20px 24px' }"
:bodyStyle="{ padding: '0 24px' }">
<a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource" :loading="tableLoading"
:row-selection="rowSelection" @change="handleTableChange" :scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:row-selection="rowSelection" @change="handleTableChange"
:scroll="{ x: 500 }"
:pagination="pagination">
<template v-slot:bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'index'">
@@ -60,7 +61,7 @@
import { ref, reactive, computed, unref } from 'vue';
import type { TableColumnsType } from 'ant-design-vue';
import { getUserList } from '@/api/system/user'
import type { searchCreatorDataType, creatorTableDataType } from './types'
import type { searchCreatorDataType, creatorType } from './types'
const openModal = ref<boolean>(false);
@@ -97,7 +98,7 @@ const columns: TableColumnsType = [
width: 500
}
]
const dataSource = ref<creatorTableDataType[]>([]);
const dataSource = ref<creatorType[]>([]);
const loadingData = () => {
tableLoading.value = true;
@@ -154,10 +155,10 @@ const handleTableChange = (values: any) => {
loadingData();
}
const selectedRowKeys = ref<creatorTableDataType['id'][]>([]);
const selectedRowName = ref<creatorTableDataType['name']>('');
const selectedRowKeys = ref<creatorType['id'][]>([]);
const selectedRowName = ref<creatorType['name']>('');
const onSelectChange = (selectingRowKeys: creatorTableDataType['id'][], selectingRows: creatorTableDataType[]) => {
const onSelectChange = (selectingRowKeys: creatorType['id'][], selectingRows: creatorType[]) => {
selectedRowKeys.value = selectingRowKeys;
selectedRowName.value = selectingRows[0].name;
}
frontend/src/views/system/log/index.vue
+1 -1
View File
@@ -55,7 +55,7 @@
:data-source="dataSource"
:loading="tableLoading"
@change="handleTableChange"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:scroll="{ x: 500 }"
:pagination="pagination"
:style="{ minHeight: '500px' }">
<template #bodyCell="{ column, record, index }">
frontend/src/views/system/menu/index.vue
+3 -2
View File
@@ -57,12 +57,13 @@
</a-button>
</a-dropdown>
</template>
<a-table :rowKey="record => record.id"
<a-table
:rowKey="record => record.id"
:columns="columns"
:data-source="dataSource"
:row-selection="rowSelection"
:loading="tableLoading"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:row-selection="rowSelection"
:pagination="false"
:style="{ minHeight: '500px' }"
>
frontend/src/views/system/notice/index.vue
+8 -3
View File
@@ -60,9 +60,14 @@
</a-dropdown>
</template>
<a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource"
:row-selection="rowSelection" :loading="tableLoading" @change="handleTableChange"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }" :pagination="pagination"
<a-table :rowKey="record => record.id"
:columns="columns"
:data-source="dataSource"
:row-selection="rowSelection"
:loading="tableLoading"
@change="handleTableChange"
:scroll="{ x: 500 }"
:pagination="pagination"
:style="{ minHeight: '500px' }">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'index'">
frontend/src/views/system/position/index.vue
+1 -1
View File
@@ -71,7 +71,7 @@
:row-selection="rowSelection"
:loading="tableLoading"
@change="handleTableChange"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:scroll="{ x: 500 }"
:pagination="pagination"
:style="{ minHeight: '500px' }">
<template #bodyCell="{ column, record, index }">
frontend/src/views/system/role/PermissionDrawer.vue
+1 -1
View File
@@ -60,7 +60,7 @@
:data-source="menuTreeData"
:row-selection="menuRowSelection"
:loading="tableLoading"
:scroll="{ x: 500, y: 'calc(100vh - 270px)' }"
:scroll="{ x: 500 }"
:pagination="false"
:style="{ minHeight: '700px' }"
:expandAll="true">
frontend/src/views/system/role/index.vue
+1 -1
View File
@@ -69,7 +69,7 @@
:row-selection="rowSelection"
:loading="tableLoading"
@change="handleTableChange"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }"
:scroll="{ x: 500 }"
:pagination="pagination"
:style="{ minHeight: '500px' }">
<template #bodyCell="{ column, record, index }">
frontend/src/views/system/user/SelectorModal.vue
+8 -2
View File
@@ -34,8 +34,14 @@
</div>
<div>
<a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource" :row-selection="rowSelection"
:loading="tableLoading" @change="handleTableChange" :scroll="{ x: 500, y: 330 }" :pagination="pagination"
<a-table :rowKey="record => record.id"
:columns="columns"
:data-source="dataSource"
:row-selection="rowSelection"
:loading="tableLoading"
@change="handleTableChange"
:scroll="{ x: 500 }"
:pagination="pagination"
:style="{ minHeight: '330px' }">
<template v-slot:bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'index'">
frontend/src/views/system/user/index.vue
+9 -3
View File
@@ -67,9 +67,15 @@
</a-button>
</a-dropdown>
</template>
<a-table :rowKey="record => record.id" :columns="columns" :data-source="dataSource"
:row-selection="rowSelection" :loading="tableLoading" @change="handleTableChange"
:scroll="{ x: 500, y: 'calc(100vh - 500px)' }" :pagination="pagination" :style="{ minHeight: '500px' }">
<a-table :rowKey="record => record.id"
:columns="columns"
:data-source="dataSource"
:row-selection="rowSelection"
:loading="tableLoading"
@change="handleTableChange"
:scroll="{ x: 500 }"
:pagination="pagination"
:style="{ minHeight: '500px' }">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'index'">
<span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>