| 提交 | 用户 | 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 | } | |
