feat: 表格批量操作去掉setTimeout&表格默认高度调整

This commit is contained in:
RubyLiu 2023-11-09 15:06:48 +08:00 committed by rubylliu
parent 3d0d242515
commit 12e95d4a5f
3 changed files with 15 additions and 19 deletions

View File

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

View File

@ -58,8 +58,9 @@
const moreAction = ref<BatchActionConfig['moreAction']>([]);
// action
const allAction = ref<BatchActionConfig['baseAction']>([]);
const lastVisibleIndex = ref<number | null>(null);
const refResizeObserver = ref<ResizeObserver>();
//
const computedStatus = ref(true);
const titleClass = 'title';
const dividerClass = 'divider';
@ -74,6 +75,10 @@
if (!refWrapper.value) {
return;
}
if (!computedStatus.value) {
computedStatus.value = true;
return;
}
const wrapperWidth = getNodeWidth(refWrapper.value);
const childNodeList = [].slice.call(refWrapper.value.children) as HTMLElement[];
@ -105,15 +110,15 @@
menuItemIndex++;
}
if (totalWidth > wrapperWidth) {
lastVisibleIndex.value = menuItemIndex - 1;
const value = menuItemIndex - 1;
baseAction.value = allAction.value.slice(0, value);
moreAction.value = allAction.value.slice(value);
computedStatus.value = false;
return;
}
}
lastVisibleIndex.value = null;
setTimeout(() => {
baseAction.value = props.actionConfig?.baseAction || [];
moreAction.value = props.actionConfig?.moreAction || [];
}, 0);
baseAction.value = props.actionConfig?.baseAction || [];
};
watch(
@ -130,15 +135,6 @@
},
{ immediate: true }
);
watch(
() => lastVisibleIndex.value,
(value) => {
if (value !== null) {
baseAction.value = allAction.value.slice(0, value);
moreAction.value = allAction.value.slice(value);
}
}
);
onMounted(() => {
refResizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {

View File

@ -33,8 +33,8 @@ export default function useTableProps<T>(
bordered: true, // 是否显示边框
showPagination: true, // 是否显示分页
size: 'default', // 表格大小
heightUsed: 294, // 表格所在的页面已经使用的高度
scroll: { x: 1400, y: appStore.innerHeight - 294 }, // 表格滚动配置
heightUsed: 286, // 表格所在的页面已经使用的高度
scroll: { x: 1400, y: appStore.innerHeight - 286 }, // 表格滚动配置
loading: false, // 加载效果
data: [], // 表格数据
/**