test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 调整表格高度计算以适应底部批量操作和分页器显隐

This commit is contained in:
RubyLiu 2023-11-09 18:40:47 +08:00 committed by 刘瑞斌
parent b038421dfc
commit 83e9962dbc
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -163,7 +163,7 @@
</template> </template>
</a-table> </a-table>
<div <div
v-if="showBatchAction || attrs.showPagination" v-if="attrs.showFooterActionWrap"
class="mt-[16px] flex h-[32px] flex-row flex-nowrap items-center" class="mt-[16px] flex h-[32px] flex-row flex-nowrap items-center"
:class="{ 'justify-between': showBatchAction }" :class="{ 'justify-between': showBatchAction }"
> >

29
frontend/src/components/pure/ms-table/useTable.ts
View File

@ -28,13 +28,16 @@ export default function useTableProps<T>(
// 编辑操作的保存回调函数 // 编辑操作的保存回调函数
saveCallBack?: (item: T) => Promise<any> saveCallBack?: (item: T) => Promise<any>
) { ) {
const defaultHeightUsed = 286;
// 底部操作栏的height和marginTop
const footerActionWrapHeight = 48;
const defaultProps: MsTableProps<T> = { const defaultProps: MsTableProps<T> = {
tableKey: '', // 缓存pageSize 或 column 的 key tableKey: '', // 缓存pageSize 或 column 的 key
bordered: true, // 是否显示边框 bordered: true, // 是否显示边框
showPagination: true, // 是否显示分页 showPagination: true, // 是否显示分页
size: 'default', // 表格大小 size: 'default', // 表格大小
heightUsed: 286, // 表格所在的页面已经使用的高度 heightUsed: defaultHeightUsed, // 表格所在的页面已经使用的高度
scroll: { x: 1400, y: appStore.innerHeight - 286 }, // 表格滚动配置 scroll: { x: 1400, y: appStore.innerHeight - defaultHeightUsed }, // 表格滚动配置
loading: false, // 加载效果 loading: false, // 加载效果
data: [], // 表格数据 data: [], // 表格数据
/** /**
@ -65,6 +68,7 @@ export default function useTableProps<T>(
emptyDataShowLine: true, // 空数据是否显示 "-" emptyDataShowLine: true, // 空数据是否显示 "-"
/** Column Selector */ /** Column Selector */
showJumpMethod: false, // 是否显示跳转方法 showJumpMethod: false, // 是否显示跳转方法
showFooterActionWrap: false, // 是否显示底部操作区域
...props, ...props,
}; };
@ -261,10 +265,12 @@ export default function useTableProps<T>(
}; };
// 重置选择器 // 重置选择器
const resetSelector = () => { const resetSelector = (isNone = true) => {
propsRes.value.selectedKeys.clear(); propsRes.value.selectedKeys.clear();
propsRes.value.excludeKeys.clear(); propsRes.value.excludeKeys.clear();
propsRes.value.selectorStatus = SelectAllEnum.NONE; if (isNone) {
propsRes.value.selectorStatus = SelectAllEnum.NONE;
}
}; };
// 获取当前表格的选中项数量 // 获取当前表格的选中项数量
@ -344,6 +350,7 @@ export default function useTableProps<T>(
// 清空选中项 // 清空选中项
resetSelector(); resetSelector();
} else { } else {
resetSelector(false);
data.forEach((item) => { data.forEach((item) => {
if (item[rowKey] && !selectedKeys.has(item[rowKey])) { if (item[rowKey] && !selectedKeys.has(item[rowKey])) {
selectedKeys.add(item[rowKey]); selectedKeys.add(item[rowKey]);
@ -373,9 +380,17 @@ export default function useTableProps<T>(
}); });
watchEffect(() => { watchEffect(() => {
// TODO 等UI出图，表格设置里加入分页配置等操作 const { heightUsed, showPagination, selectedKeys, msPagination } = propsRes.value;
const { heightUsed } = propsRes.value; const { pageSize, total } = msPagination as Pagination;
const currentY = appStore.innerHeight - (heightUsed || 294); /*
* 是否有底部操作栏 包括 批量操作 和 分页器
* 1. 有分页器，且总条数大于每页条数
* 2. 有选中项
*/
const hasFooterAction = (showPagination && total > pageSize) || selectedKeys.size > 0;
const currentY =
appStore.innerHeight - (heightUsed || defaultHeightUsed) + (hasFooterAction ? 0 : footerActionWrapHeight);
propsRes.value.showFooterActionWrap = hasFooterAction;
propsRes.value.scroll = { ...propsRes.value.scroll, y: currentY }; propsRes.value.scroll = { ...propsRes.value.scroll, y: currentY };
}); });