refactor(hooks): streamline column visibility handling in useTable and table components

packages/hooks/src/use-table.ts

@@ -72,18 +72,14 @@ export default function useTable<ResponseData, ApiData, Column, Pagination exten
 
   const data = ref([]) as Ref<ApiData[]>;
 
-  const allColumns = ref(columns()) as Ref<Column[]>;
-
   const columnChecks = ref(getColumnChecks(columns())) as Ref<TableColumnCheck[]>;
 
   const $columns = computed(() => getColumns(columns(), columnChecks.value));
 
   function reloadColumns() {
-    allColumns.value = columns();
-
     const checkMap = new Map(columnChecks.value.map(col => [col.key, col.checked]));
 
-    const defaultChecks = getColumnChecks(allColumns.value);
+    const defaultChecks = getColumnChecks(columns());
 
     columnChecks.value = defaultChecks.map(col => ({
       ...col,

src/components/advanced/table-column-setting.vue

@@ -22,7 +22,12 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
       </NButton>
     </template>
     <VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
-      <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
+      <div
+        v-for="item in columns"
+        :key="item.key"
+        class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
+        :class="{ hidden: !item.visible }"
+      >
         <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
         <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
           <template v-if="typeof item.title === 'function'">

src/hooks/common/table.ts

@@ -250,28 +250,26 @@ function getColumnChecks<Column extends NaiveUI.TableColumn<any>>(
   const checks: TableColumnCheck[] = [];
 
   cols.forEach(column => {
-    const visible = getColumnVisible?.(column) ?? true;
-
     if (isTableColumnHasKey(column)) {
       checks.push({
         key: column.key as string,
         title: column.title!,
         checked: true,
-        visible
+        visible: getColumnVisible?.(column) ?? true
       });
     } else if (column.type === 'selection') {
       checks.push({
         key: SELECTION_KEY,
         title: $t('common.check'),
         checked: true,
-        visible
+        visible: getColumnVisible?.(column) ?? false
       });
     } else if (column.type === 'expand') {
       checks.push({
         key: EXPAND_KEY,
         title: $t('common.expandColumn'),
         checked: true,
-        visible
+        visible: getColumnVisible?.(column) ?? false
       });
     }
   });