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

View File

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

View File

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