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

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
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

@ -164,7 +164,7 @@
</a-table> </a-table>
<div <div
v-if="showBatchAction || attrs.showPagination" 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 }" :class="{ 'justify-between': showBatchAction }"
> >
<div class="flex flex-grow"> <div class="flex flex-grow">

28
frontend/src/components/pure/ms-table/batchAction.vue
View File

@ -58,8 +58,9 @@
const moreAction = ref<BatchActionConfig['moreAction']>([]); const moreAction = ref<BatchActionConfig['moreAction']>([]);
// 存储所有的action // 存储所有的action
const allAction = ref<BatchActionConfig['baseAction']>([]); const allAction = ref<BatchActionConfig['baseAction']>([]);
const lastVisibleIndex = ref<number | null>(null);
const refResizeObserver = ref<ResizeObserver>(); const refResizeObserver = ref<ResizeObserver>();
// 控制是否重新计算
const computedStatus = ref(true);
const titleClass = 'title'; const titleClass = 'title';
const dividerClass = 'divider'; const dividerClass = 'divider';
@ -74,6 +75,10 @@
if (!refWrapper.value) { if (!refWrapper.value) {
return; return;
} }
if (!computedStatus.value) {
computedStatus.value = true;
return;
}
const wrapperWidth = getNodeWidth(refWrapper.value); const wrapperWidth = getNodeWidth(refWrapper.value);
const childNodeList = [].slice.call(refWrapper.value.children) as HTMLElement[]; const childNodeList = [].slice.call(refWrapper.value.children) as HTMLElement[];
@ -105,15 +110,15 @@
menuItemIndex++; menuItemIndex++;
} }
if (totalWidth > wrapperWidth) { 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; return;
} }
} }
lastVisibleIndex.value = null; moreAction.value = props.actionConfig?.moreAction || [];
setTimeout(() => { baseAction.value = props.actionConfig?.baseAction || [];
baseAction.value = props.actionConfig?.baseAction || [];
moreAction.value = props.actionConfig?.moreAction || [];
}, 0);
}; };
watch( watch(
@ -130,15 +135,6 @@
}, },
{ immediate: true } { immediate: true }
); );
watch(
() => lastVisibleIndex.value,
(value) => {
if (value !== null) {
baseAction.value = allAction.value.slice(0, value);
moreAction.value = allAction.value.slice(value);
}
}
);
onMounted(() => { onMounted(() => {
refResizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => { refResizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {

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

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