fix: the action column appears repeatedly in the table (#53)

vben
1 parent e1e9baa8
Showing 2 changed files with 23 additions and 26 deletions
src/components/Table/src/BasicTable.vue
src/components/Table/src/hooks/useColumns.ts
@@ -190,6 +190,14 @@
         return !!unref(getDataSourceRef).length;
       });
  
+      watch(
+        () => unref(getDataSourceRef),
+        () => {
+          handleSummary();
+        },
+        { immediate: true }
+      );
+
       function getRowClassName(record: TableCustomRecord<any>, index: number) {
         const { striped, rowClassName } = unref(getMergeProps);
         if (!striped) return;
@@ -242,14 +250,6 @@
         }
       }
  
-      watch(
-        () => unref(getDataSourceRef),
-        () => {
-          handleSummary();
-        },
-        { immediate: true }
-      );
-
       function setProps(props: Partial<BasicTableProps>) {
         innerPropsRef.value = deepMerge(unref(innerPropsRef) || {}, props);
       }
 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<false | PaginationProps>
 ) {
   const { propsRef } = useProps(refProps);
-
   const columnsRef = (ref(unref(propsRef).columns) as unknown) as Ref<BasicColumn[]>;
   const cacheColumnsRef = (ref(unref(propsRef).columns) as unknown) as Ref<BasicColumn[]>;
  
-  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;