优化表格列的类型定义,简化操作列的函数参数

This commit is contained in:
2025-12-17 17:04:42 +07:00
parent 773c916796
commit 8f0d7ba9a7
2 changed files with 13 additions and 13 deletions

View File

@@ -1,17 +1,17 @@
import { h } from 'vue'; import { h } from 'vue';
import type { ButtonProps, DataTableColumns } from 'naive-ui'; import type { ButtonProps, DataTableColumn, DataTableColumns } from 'naive-ui';
import { NButton, NSpace } from 'naive-ui'; import { NButton, NSpace } from 'naive-ui';
import type { TableColumn } from 'naive-ui/es/data-table/src/interface'; import type { InternalRowData } from 'naive-ui/es/data-table/src/interface';
import type { safeClient } from '@/service/api'; import type { safeClient } from '@/service/api';
import type TableBase from './table-base.vue'; import type TableBase from './table-base.vue';
export type TableBaseColumns<T = any> = Array< type TableBaseColumn<T = InternalRowData> = DataTableColumn<T> & {
TableColumn<T> & { operations?: (row: T) => Array<Partial<ButtonProps> & { contentText: string }>;
operations?: (row: T) => Array<Partial<ButtonProps> & { contentText: string }>; key: string;
key: string; title: string;
title: string; };
}
>; export type TableBaseColumns<T = InternalRowData> = Array<TableBaseColumn<T>>;
export type TableInst = InstanceType<typeof TableBase>; export type TableInst = InstanceType<typeof TableBase>;
@@ -22,7 +22,7 @@ export interface Pagination {
export type TableFetchData = (page: Pagination) => ReturnType<typeof safeClient>; export type TableFetchData = (page: Pagination) => ReturnType<typeof safeClient>;
export function transformColumns<T = any>(columns: TableBaseColumns<T>): DataTableColumns<T> { export function transformColumns<T = InternalRowData>(columns: TableBaseColumns<T>): DataTableColumns<T> {
return columns.map(col => { return columns.map(col => {
return { return {
...col, ...col,
@@ -31,8 +31,8 @@ export function transformColumns<T = any>(columns: TableBaseColumns<T>): DataTab
h(NSpace, null, { h(NSpace, null, {
default: () => col.operations!(row).map(item => h(NButton, item, { default: () => item.contentText })) default: () => col.operations!(row).map(item => h(NButton, item, { default: () => item.contentText }))
}) })
: undefined : (col as any).render
} as TableColumn<T>; } as TableBaseColumn<T>;
}); });
} }

View File

@@ -23,7 +23,7 @@ const columns: TableBaseColumns = [
title: '操作', title: '操作',
fixed: 'right', fixed: 'right',
key: 'operation', key: 'operation',
operations: (row: any) => [ operations: row => [
{ {
contentText: '处理', contentText: '处理',
type: 'primary', type: 'primary',