diff --git a/src/components/UI/Table/src/hooks/useTableHeaders.ts b/src/components/UI/Table/src/hooks/useTableHeaders.ts index 5a5eb3b2..307714f9 100644 --- a/src/components/UI/Table/src/hooks/useTableHeaders.ts +++ b/src/components/UI/Table/src/hooks/useTableHeaders.ts @@ -1,31 +1,29 @@ -import type { ComputedRef } from 'vue' import type { WTable } from '../types' -import { ref, unref, watch } from 'vue' +import { ComputedRef, ref, watchEffect } from 'vue' import { formatTree } from 'easy-fns-ts' import { useI18n } from '/@/locales' import { wTableWarning } from '../utils' -export const useTableHeaders = (props: ComputedRef) => { - const { t, locale } = useI18n() +/** + * @description + * Since props has been proxyed + * So to prevent props like `stripe`/`border` which are not relatived to header from triggering table rerender again + * This hook only use normal props, but not proxyed one + */ +export const useTableHeaders = ( + props: WTable.Props, + getProps: ComputedRef +) => { + const { t } = useI18n() const tableHeaders = ref([]) - watch( - // TODO - // Since props has been proxyed - // So if even props like `stripe`/`border` which are not relatived to header will trigger the watch and rerender again - // Demo is the case, really bad experience - () => [unref(props).headers, locale], - ([val, _]: any) => { - if (!val) { - return - } - - wTableWarning('Rendered!') - - const formatted = formatTree(val, { + watchEffect(() => { + const formatted = formatTree( + props.headers ? props.headers! : getProps.value.headers!, + { format: (node) => ({ ...node, visible: node.visible !== false, @@ -40,15 +38,13 @@ export const useTableHeaders = (props: ComputedRef) => { ? t('component.table.expand') : node.label, }), - }) - - tableHeaders.value = formatted - }, - { - deep: true, - immediate: true, - } - ) + } + ) + + wTableWarning('Rendered!') + + tableHeaders.value = formatted + }) return { tableHeaders,