xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-18 01:36:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Soybean 2025-07-20 00:29:47 +08:00
parent 8a7cd5934b
commit ee4341457a
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hooks/src/use-table.ts
View File

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

7
src/components/advanced/table-column-setting.vue
View File

@ -22,7 +22,12 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
</NButton> </NButton>
</template> </template>
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable"> <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" /> <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1"> <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
<template v-if="typeof item.title === 'function'"> <template v-if="typeof item.title === 'function'">

8
src/hooks/common/table.ts
View File

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