diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index 9578d7378..cf0986522 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -190,6 +190,14 @@ return !!unref(getDataSourceRef).length; }); + watch( + () => unref(getDataSourceRef), + () => { + handleSummary(); + }, + { immediate: true } + ); + function getRowClassName(record: TableCustomRecord, index: number) { const { striped, rowClassName } = unref(getMergeProps); if (!striped) return; @@ -242,14 +250,6 @@ } } - watch( - () => unref(getDataSourceRef), - () => { - handleSummary(); - }, - { immediate: true } - ); - function setProps(props: Partial) { innerPropsRef.value = deepMerge(unref(innerPropsRef) || {}, props); } diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts index b1a627a2a..bb022b429 100644 --- a/src/components/Table/src/hooks/useColumns.ts +++ b/src/components/Table/src/hooks/useColumns.ts @@ -1,6 +1,6 @@ import { BasicColumn, BasicTableProps } from '../types/table'; import { PaginationProps } from '../types/pagination'; -import { unref, ComputedRef, Ref, computed, watch, ref } from 'vue'; +import { unref, ComputedRef, Ref, computed, watchEffect, ref, toRaw } from 'vue'; import { isBoolean, isArray, isObject } from '/@/utils/is'; import { PAGE_SIZE } from '../const'; import { useProps } from './useProps'; @@ -10,20 +10,9 @@ export function useColumns( getPaginationRef: ComputedRef ) { const { propsRef } = useProps(refProps); - const columnsRef = (ref(unref(propsRef).columns) as unknown) as Ref; const cacheColumnsRef = (ref(unref(propsRef).columns) as unknown) as Ref; - watch( - () => unref(propsRef).columns, - (columns) => { - columnsRef.value = columns; - cacheColumnsRef.value = columns; - }, - { - immediate: true, - } - ); const getColumnsRef = computed(() => { const props = unref(propsRef); const { showIndexColumn, indexColumnProps, ellipsis, actionColumn, isTreeTable } = props; @@ -81,16 +70,24 @@ export function useColumns( } if (actionColumn) { const hasIndex = columns.findIndex((column) => column.flag === 'ACTION'); - columns.push({ - ...(hasIndex === -1 ? columns[hasIndex] : {}), - fixed: 'right', - ...actionColumn, - flag: 'ACTION', - }); + if (hasIndex === -1) { + columns.push({ + ...columns[hasIndex], + fixed: 'right', + ...actionColumn, + flag: 'ACTION', + }); + } } return columns; }); + watchEffect(() => { + const columns = toRaw(unref(propsRef).columns); + columnsRef.value = columns; + cacheColumnsRef.value = columns; + }); + function setColumns(columns: BasicColumn[] | string[]) { if (!isArray(columns)) return;