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

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
-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();
});
+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 }">
+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