更新表格组件,新增过滤功能,调整数据获取逻辑,优化界面布局
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import type { Component, VNode } from 'vue';
|
||||
import { h } from 'vue';
|
||||
import type { ButtonProps, DataTableColumn, DataTableColumns } from 'naive-ui';
|
||||
import { NButton, NSpace } from 'naive-ui';
|
||||
@@ -24,12 +25,27 @@ export interface Pagination {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export type TableFetchData = (page: Pagination) => ReturnType<typeof safeClient>;
|
||||
export type TableFetchData = (query: {
|
||||
pagination: Pagination;
|
||||
filter?: Record<string, any>;
|
||||
}) => ReturnType<typeof safeClient>;
|
||||
|
||||
export type TableFilterColumn = {
|
||||
key: string;
|
||||
title: string;
|
||||
component?: Component | VNode;
|
||||
componentProps?: Record<string, any>;
|
||||
};
|
||||
|
||||
export type TableFilterColumns = Array<TableFilterColumn>;
|
||||
|
||||
export function transformColumns<T = InternalRowData>(columns: TableBaseColumns<T>): DataTableColumns<T> {
|
||||
return columns.map(col => {
|
||||
return {
|
||||
...col,
|
||||
ellipsis: {
|
||||
tooltip: true
|
||||
},
|
||||
render: col.operations
|
||||
? (row: T) =>
|
||||
h(NSpace, null, {
|
||||
|
||||
Reference in New Issue
Block a user