提交 | 用户 | age
|
116a1f
|
1 |
import type { ComputedRef, Ref } from 'vue'; |
V |
2 |
import type { BasicTableProps } from '../types/table'; |
|
3 |
import { unref, computed, h, nextTick, watchEffect } from 'vue'; |
|
4 |
import TableFooter from '../components/TableFooter.vue'; |
|
5 |
import { useEventListener } from '/@/hooks/event/useEventListener'; |
|
6 |
|
|
7 |
export function useTableFooter( |
|
8 |
propsRef: ComputedRef<BasicTableProps>, |
|
9 |
scrollRef: ComputedRef<{ |
|
10 |
x: string | number | true; |
|
11 |
y: Nullable<number>; |
|
12 |
scrollToFirstRowOnChange: boolean; |
|
13 |
}>, |
|
14 |
tableElRef: Ref<ComponentRef>, |
56a966
|
15 |
getDataSourceRef: ComputedRef<Recordable>, |
116a1f
|
16 |
) { |
V |
17 |
const getIsEmptyData = computed(() => { |
|
18 |
return (unref(getDataSourceRef) || []).length === 0; |
|
19 |
}); |
|
20 |
|
|
21 |
const getFooterProps = computed((): Recordable | undefined => { |
8d7d08
|
22 |
const { summaryFunc, showSummary, summaryData } = unref(propsRef); |
116a1f
|
23 |
return showSummary && !unref(getIsEmptyData) |
8d7d08
|
24 |
? () => h(TableFooter, { summaryFunc, summaryData, scroll: unref(scrollRef) }) |
116a1f
|
25 |
: undefined; |
V |
26 |
}); |
|
27 |
|
|
28 |
watchEffect(() => { |
|
29 |
handleSummary(); |
|
30 |
}); |
|
31 |
|
|
32 |
function handleSummary() { |
|
33 |
const { showSummary } = unref(propsRef); |
|
34 |
if (!showSummary || unref(getIsEmptyData)) return; |
|
35 |
|
|
36 |
nextTick(() => { |
|
37 |
const tableEl = unref(tableElRef); |
|
38 |
if (!tableEl) return; |
|
39 |
const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body'); |
|
40 |
const bodyDom = bodyDomList[0]; |
|
41 |
useEventListener({ |
|
42 |
el: bodyDom, |
|
43 |
name: 'scroll', |
|
44 |
listener: () => { |
|
45 |
const footerBodyDom = tableEl.$el.querySelector( |
56a966
|
46 |
'.ant-table-footer .ant-table-body', |
116a1f
|
47 |
) as HTMLDivElement; |
V |
48 |
if (!footerBodyDom || !bodyDom) return; |
|
49 |
footerBodyDom.scrollLeft = bodyDom.scrollLeft; |
|
50 |
}, |
|
51 |
wait: 0, |
|
52 |
options: true, |
|
53 |
}); |
|
54 |
}); |
|
55 |
} |
|
56 |
return { getFooterProps }; |
|
57 |
} |