优化表格列的类型定义,简化操作列的函数参数
This commit is contained in:
@@ -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>;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user