diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index 3a3eea2..a9d3b51 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -140,6 +140,7 @@ deleteSelectRowByKey, } = useCustomSelection( getProps, + emit, wrapRef, getPaginationInfo, tableData, diff --git a/src/components/Table/src/hooks/useCustomSelection.tsx b/src/components/Table/src/hooks/useCustomSelection.tsx index 3297c8d..b069188 100644 --- a/src/components/Table/src/hooks/useCustomSelection.tsx +++ b/src/components/Table/src/hooks/useCustomSelection.tsx @@ -1,7 +1,7 @@ import type { BasicColumn } from '/@/components/Table'; import type { Ref, ComputedRef } from 'vue'; import type { BasicTableProps, PaginationProps, TableRowSelection } from '/@/components/Table'; -import { computed, onUnmounted, ref, toRaw, unref, watchEffect } from 'vue'; +import { computed, nextTick, onUnmounted, ref, toRaw, unref, watch, watchEffect } from 'vue'; import { omit } from 'lodash-es'; import { throttle } from 'lodash-es'; import { Checkbox } from 'ant-design-vue'; @@ -20,6 +20,7 @@ export const CUS_SEL_COLUMN_KEY = 'j-custom-selected-column'; */ export function useCustomSelection( propsRef: ComputedRef, + emit: EmitType, wrapRef: Ref, getPaginationRef: ComputedRef, tableData: Ref, @@ -99,13 +100,30 @@ export function useCustomSelection( }; }); + // 当任意一个变化时,触发同步检测 + watch([selectedKeys, selectedRows], () => { + nextTick(() => { + syncSelectedRows(); + }); + }); + // 监听滚动条事件 const onScrollTopChange = throttle((e) => (scrollTop.value = e?.target?.scrollTop), 150); + let bodyResizeObserver: Nullable = null; // 获取首行行高 watchEffect(() => { if (bodyEl.value) { - bodyHeight.value = bodyEl.value.offsetHeight; + // 监听div高度变化 + bodyResizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + if (entry.target === bodyEl.value && entry.contentRect) { + const { height } = entry.contentRect; + bodyHeight.value = Math.ceil(height); + } + } + }); + bodyResizeObserver.observe(bodyEl.value); const el = bodyEl.value?.querySelector('tbody.ant-table-tbody tr.ant-table-row') as HTMLDivElement; if (el) { rowHeight.value = el.offsetHeight; @@ -125,6 +143,9 @@ export function useCustomSelection( if (bodyEl.value) { bodyEl.value?.removeEventListener('scroll', onScrollTopChange); } + if (bodyResizeObserver != null) { + bodyResizeObserver.disconnect(); + } }); // 选择全部 @@ -237,6 +258,10 @@ export function useCustomSelection( }, 0); } } + emit('selection-change', { + keys: getSelectRowKeys(), + rows: getSelectRows(), + }); } // 用于判断是否是自定义选择列 @@ -317,6 +342,13 @@ export function useCustomSelection( onSelectAll(false); } + // 通过 selectedKeys 同步 selectedRows + function syncSelectedRows() { + if (selectedKeys.value.length !== selectedRows.value.length) { + setSelectedRowKeys(selectedKeys.value); + } + } + // 设置选择的key function setSelectedRowKeys(rowKeys: string[]) { selectedKeys.value = rowKeys; @@ -333,6 +365,7 @@ export function useCustomSelection( found && trueSelectedRows.push(found); }); selectedRows.value = trueSelectedRows; + emitChange(); } function getSelectRows() {