refactor: table
tangjinzhou
parent
915100e3bb
commit
844700e561
|
|
@ -1,111 +0,0 @@
|
||||||
import type { App, Plugin } from 'vue';
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import T, { defaultTableProps } from './Table';
|
|
||||||
import type Column from './Column';
|
|
||||||
import type ColumnGroup from './ColumnGroup';
|
|
||||||
import {
|
|
||||||
getOptionProps,
|
|
||||||
getKey,
|
|
||||||
getPropsData,
|
|
||||||
getSlot,
|
|
||||||
flattenChildren,
|
|
||||||
} from '../_util/props-util';
|
|
||||||
|
|
||||||
const Table = defineComponent({
|
|
||||||
name: 'ATable',
|
|
||||||
Column: T.Column,
|
|
||||||
ColumnGroup: T.ColumnGroup,
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: defaultTableProps,
|
|
||||||
methods: {
|
|
||||||
normalize(elements = []) {
|
|
||||||
const flattenElements = flattenChildren(elements);
|
|
||||||
const columns = [];
|
|
||||||
flattenElements.forEach(element => {
|
|
||||||
if (!element) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const key = getKey(element);
|
|
||||||
const style = element.props?.style || {};
|
|
||||||
const cls = element.props?.class || '';
|
|
||||||
const props = getPropsData(element);
|
|
||||||
const { default: children, ...restSlots } = element.children || {};
|
|
||||||
const column = { ...restSlots, ...props, style, class: cls };
|
|
||||||
if (key) {
|
|
||||||
column.key = key;
|
|
||||||
}
|
|
||||||
if (element.type?.__ANT_TABLE_COLUMN_GROUP) {
|
|
||||||
column.children = this.normalize(typeof children === 'function' ? children() : children);
|
|
||||||
} else {
|
|
||||||
const customRender = element.children?.default;
|
|
||||||
column.customRender = column.customRender || customRender;
|
|
||||||
}
|
|
||||||
columns.push(column);
|
|
||||||
});
|
|
||||||
return columns;
|
|
||||||
},
|
|
||||||
updateColumns(cols = []) {
|
|
||||||
const columns = [];
|
|
||||||
const { $slots } = this;
|
|
||||||
cols.forEach(col => {
|
|
||||||
const { slots = {}, ...restProps } = col;
|
|
||||||
const column = {
|
|
||||||
...restProps,
|
|
||||||
};
|
|
||||||
Object.keys(slots).forEach(key => {
|
|
||||||
const name = slots[key];
|
|
||||||
if (column[key] === undefined && $slots[name]) {
|
|
||||||
column[key] = $slots[name];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// if (slotScopeName && $scopedSlots[slotScopeName]) {
|
|
||||||
// column.customRender = column.customRender || $scopedSlots[slotScopeName]
|
|
||||||
// }
|
|
||||||
if (col.children) {
|
|
||||||
column.children = this.updateColumns(column.children);
|
|
||||||
}
|
|
||||||
columns.push(column);
|
|
||||||
});
|
|
||||||
return columns;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const { normalize, $slots } = this;
|
|
||||||
const props: any = { ...getOptionProps(this), ...this.$attrs };
|
|
||||||
const columns = props.columns ? this.updateColumns(props.columns) : normalize(getSlot(this));
|
|
||||||
let { title, footer } = props;
|
|
||||||
const {
|
|
||||||
title: slotTitle,
|
|
||||||
footer: slotFooter,
|
|
||||||
expandedRowRender = props.expandedRowRender,
|
|
||||||
expandIcon,
|
|
||||||
} = $slots;
|
|
||||||
title = title || slotTitle;
|
|
||||||
footer = footer || slotFooter;
|
|
||||||
const tProps = {
|
|
||||||
...props,
|
|
||||||
columns,
|
|
||||||
title,
|
|
||||||
footer,
|
|
||||||
expandedRowRender,
|
|
||||||
expandIcon: this.$props.expandIcon || expandIcon,
|
|
||||||
};
|
|
||||||
return <T {...tProps} ref="table" />;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
/* istanbul ignore next */
|
|
||||||
Table.install = function (app: App) {
|
|
||||||
app.component(Table.name, Table);
|
|
||||||
app.component(Table.Column.name, Table.Column);
|
|
||||||
app.component(Table.ColumnGroup.name, Table.ColumnGroup);
|
|
||||||
return app;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const TableColumn = Table.Column;
|
|
||||||
export const TableColumnGroup = Table.ColumnGroup;
|
|
||||||
|
|
||||||
export default Table as typeof Table &
|
|
||||||
Plugin & {
|
|
||||||
readonly Column: typeof Column;
|
|
||||||
readonly ColumnGroup: typeof ColumnGroup;
|
|
||||||
};
|
|
||||||
|
|
@ -195,3 +195,10 @@ type TablePaginationPosition =
|
||||||
export interface TablePaginationConfig extends PaginationProps {
|
export interface TablePaginationConfig extends PaginationProps {
|
||||||
position?: TablePaginationPosition[];
|
position?: TablePaginationPosition[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface TransformCellTextProps {
|
||||||
|
text: any;
|
||||||
|
column: ColumnType;
|
||||||
|
record: any;
|
||||||
|
index: number;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,260 +0,0 @@
|
||||||
import type { ExtractPropTypes, PropType, UnwrapRef } from 'vue';
|
|
||||||
import PropTypes, { withUndefined } from '../_util/vue-types';
|
|
||||||
import { paginationProps as getPaginationProps, paginationConfig } from '../pagination';
|
|
||||||
import { spinProps } from '../spin';
|
|
||||||
import { tuple } from '../_util/type';
|
|
||||||
|
|
||||||
const PaginationProps = getPaginationProps();
|
|
||||||
|
|
||||||
export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
|
|
||||||
export const ColumnFilterItem = PropTypes.shape({
|
|
||||||
text: PropTypes.string,
|
|
||||||
value: PropTypes.string,
|
|
||||||
children: PropTypes.array,
|
|
||||||
}).loose;
|
|
||||||
|
|
||||||
export const columnProps = {
|
|
||||||
title: PropTypes.any,
|
|
||||||
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
dataIndex: PropTypes.string,
|
|
||||||
customRender: PropTypes.func,
|
|
||||||
customCell: PropTypes.func,
|
|
||||||
customHeaderCell: PropTypes.func,
|
|
||||||
align: PropTypes.oneOf(tuple('left', 'right', 'center')),
|
|
||||||
ellipsis: PropTypes.looseBool,
|
|
||||||
filters: PropTypes.arrayOf(ColumnFilterItem),
|
|
||||||
onFilter: {
|
|
||||||
type: Function as PropType<(value: any, record: any) => boolean>,
|
|
||||||
},
|
|
||||||
filterMultiple: PropTypes.looseBool,
|
|
||||||
filterDropdown: PropTypes.any,
|
|
||||||
filterDropdownVisible: PropTypes.looseBool,
|
|
||||||
onFilterDropdownVisibleChange: {
|
|
||||||
type: Function as PropType<(visible: boolean) => void>,
|
|
||||||
},
|
|
||||||
sorter: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]),
|
|
||||||
defaultSortOrder: PropTypes.oneOf(tuple('ascend', 'descend')),
|
|
||||||
colSpan: PropTypes.number,
|
|
||||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
fixed: withUndefined(
|
|
||||||
PropTypes.oneOfType([PropTypes.looseBool, PropTypes.oneOf(tuple('left', 'right'))]),
|
|
||||||
),
|
|
||||||
filterIcon: PropTypes.any,
|
|
||||||
filteredValue: PropTypes.array,
|
|
||||||
filtered: PropTypes.looseBool,
|
|
||||||
defaultFilteredValue: PropTypes.array,
|
|
||||||
sortOrder: withUndefined(
|
|
||||||
PropTypes.oneOfType([PropTypes.looseBool, PropTypes.oneOf(tuple('ascend', 'descend'))]),
|
|
||||||
),
|
|
||||||
sortDirections: PropTypes.array,
|
|
||||||
// children?: ColumnProps<T>[];
|
|
||||||
// onCell?: (record: T) => any;
|
|
||||||
// onHeaderCell?: (props: ColumnProps<T>) => any;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ColumnProps = Partial<ExtractPropTypes<typeof columnProps>> & {
|
|
||||||
slots?: {
|
|
||||||
title?: string;
|
|
||||||
filterIcon?: string;
|
|
||||||
filterDropdown?: string;
|
|
||||||
customRender?: string;
|
|
||||||
[key: string]: string | undefined;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface TableComponents {
|
|
||||||
table?: any;
|
|
||||||
header?: {
|
|
||||||
wrapper?: any;
|
|
||||||
row?: any;
|
|
||||||
cell?: any;
|
|
||||||
};
|
|
||||||
body?: {
|
|
||||||
wrapper?: any;
|
|
||||||
row?: any;
|
|
||||||
cell?: any;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TableLocale = PropTypes.shape({
|
|
||||||
filterTitle: PropTypes.string,
|
|
||||||
filterConfirm: PropTypes.any,
|
|
||||||
filterReset: PropTypes.any,
|
|
||||||
emptyText: PropTypes.any,
|
|
||||||
selectAll: PropTypes.any,
|
|
||||||
selectInvert: PropTypes.any,
|
|
||||||
sortTitle: PropTypes.string,
|
|
||||||
expand: PropTypes.string,
|
|
||||||
collapse: PropTypes.string,
|
|
||||||
}).loose;
|
|
||||||
|
|
||||||
export const RowSelectionType = PropTypes.oneOf(tuple('checkbox', 'radio'));
|
|
||||||
// export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any;
|
|
||||||
|
|
||||||
export const tableRowSelection = {
|
|
||||||
type: RowSelectionType,
|
|
||||||
selectedRowKeys: PropTypes.array,
|
|
||||||
// onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any;
|
|
||||||
getCheckboxProps: PropTypes.func,
|
|
||||||
// onSelect?: SelectionSelectFn<T>;
|
|
||||||
// onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
|
|
||||||
// onSelectInvert?: (selectedRows: Object[]) => any;
|
|
||||||
selections: withUndefined(PropTypes.oneOfType([PropTypes.array, PropTypes.looseBool])),
|
|
||||||
hideDefaultSelections: PropTypes.looseBool,
|
|
||||||
fixed: PropTypes.looseBool,
|
|
||||||
columnWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
selectWay: PropTypes.oneOf(
|
|
||||||
tuple('onSelect', 'onSelectMultiple', 'onSelectAll', 'onSelectInvert'),
|
|
||||||
),
|
|
||||||
columnTitle: PropTypes.any,
|
|
||||||
};
|
|
||||||
|
|
||||||
export type SortOrder = 'descend' | 'ascend';
|
|
||||||
|
|
||||||
const paginationProps = paginationConfig();
|
|
||||||
|
|
||||||
export const tableProps = {
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
dropdownPrefixCls: PropTypes.string,
|
|
||||||
rowSelection: PropTypes.oneOfType([PropTypes.shape(tableRowSelection).loose, Object]),
|
|
||||||
pagination: withUndefined(
|
|
||||||
PropTypes.oneOfType([
|
|
||||||
PropTypes.shape<Partial<ExtractPropTypes<typeof paginationProps>>>(paginationProps).loose,
|
|
||||||
PropTypes.looseBool,
|
|
||||||
]),
|
|
||||||
),
|
|
||||||
size: PropTypes.oneOf(tuple('default', 'middle', 'small', 'large')),
|
|
||||||
dataSource: PropTypes.array,
|
|
||||||
components: PropTypes.object,
|
|
||||||
columns: {
|
|
||||||
type: Array as PropType<ColumnProps>,
|
|
||||||
},
|
|
||||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
||||||
rowClassName: PropTypes.func,
|
|
||||||
expandedRowRender: PropTypes.any,
|
|
||||||
defaultExpandAllRows: PropTypes.looseBool,
|
|
||||||
defaultExpandedRowKeys: PropTypes.array,
|
|
||||||
expandedRowKeys: PropTypes.array,
|
|
||||||
expandIconAsCell: PropTypes.looseBool,
|
|
||||||
expandIconColumnIndex: PropTypes.number,
|
|
||||||
expandRowByClick: PropTypes.looseBool,
|
|
||||||
loading: PropTypes.oneOfType([PropTypes.shape(spinProps()).loose, PropTypes.looseBool]),
|
|
||||||
locale: TableLocale,
|
|
||||||
indentSize: PropTypes.number,
|
|
||||||
customRow: PropTypes.func,
|
|
||||||
customHeaderRow: PropTypes.func,
|
|
||||||
useFixedHeader: PropTypes.looseBool,
|
|
||||||
bordered: PropTypes.looseBool,
|
|
||||||
showHeader: PropTypes.looseBool,
|
|
||||||
footer: PropTypes.func,
|
|
||||||
title: PropTypes.func,
|
|
||||||
scroll: {
|
|
||||||
type: Object as PropType<{
|
|
||||||
x?: boolean | number | string;
|
|
||||||
y?: boolean | number | string;
|
|
||||||
scrollToFirstRowOnChange?: boolean;
|
|
||||||
}>,
|
|
||||||
},
|
|
||||||
childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
|
|
||||||
bodyStyle: PropTypes.style,
|
|
||||||
sortDirections: {
|
|
||||||
type: Array as PropType<SortOrder[]>,
|
|
||||||
},
|
|
||||||
tableLayout: PropTypes.string,
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
expandIcon: PropTypes.func,
|
|
||||||
transformCellText: PropTypes.func,
|
|
||||||
onExpandedRowsChange: PropTypes.func,
|
|
||||||
onExpand: PropTypes.func,
|
|
||||||
onChange: PropTypes.func,
|
|
||||||
onRowClick: PropTypes.func,
|
|
||||||
// style?: React.CSSProperties;
|
|
||||||
// children?: React.ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type TableRowSelection = Partial<ExtractPropTypes<typeof tableRowSelection>>;
|
|
||||||
|
|
||||||
export type TableProps = Partial<ExtractPropTypes<typeof tableProps>>;
|
|
||||||
|
|
||||||
export interface TableStateFilters {
|
|
||||||
[key: string]: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TableState {
|
|
||||||
pagination?: Partial<ExtractPropTypes<typeof PaginationProps>>;
|
|
||||||
filters?: TableStateFilters;
|
|
||||||
sortColumn?: ColumnProps | null;
|
|
||||||
sortOrder?: SortOrder;
|
|
||||||
columns?: ColumnProps[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TransformCellTextProps {
|
|
||||||
text: any;
|
|
||||||
column: ColumnProps;
|
|
||||||
record: any;
|
|
||||||
index: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// export type SelectionItemSelectFn = (key: string[]) => any;
|
|
||||||
|
|
||||||
// export interface SelectionItem {
|
|
||||||
// key: PropTypes.string,
|
|
||||||
// text: PropTypes.any,
|
|
||||||
// onSelect: SelectionItemSelectFn;
|
|
||||||
// }
|
|
||||||
export type TableStore = UnwrapRef<{
|
|
||||||
selectedRowKeys: any[];
|
|
||||||
selectionDirty: boolean;
|
|
||||||
}>;
|
|
||||||
export const SelectionCheckboxAllProps = {
|
|
||||||
propsSymbol: PropTypes.any,
|
|
||||||
store: PropTypes.any,
|
|
||||||
locale: PropTypes.any,
|
|
||||||
disabled: PropTypes.looseBool,
|
|
||||||
getCheckboxPropsByItem: PropTypes.func,
|
|
||||||
getRecordKey: PropTypes.func,
|
|
||||||
data: PropTypes.array,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
hideDefaultSelections: PropTypes.looseBool,
|
|
||||||
selections: PropTypes.oneOfType([PropTypes.array, PropTypes.looseBool]),
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
onSelect: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
// export interface SelectionCheckboxAllState {
|
|
||||||
// checked: PropTypes.looseBool,
|
|
||||||
// indeterminate: PropTypes.looseBool,
|
|
||||||
// }
|
|
||||||
|
|
||||||
export const SelectionBoxProps = {
|
|
||||||
store: PropTypes.any,
|
|
||||||
type: RowSelectionType,
|
|
||||||
defaultSelection: PropTypes.array,
|
|
||||||
rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
name: PropTypes.string,
|
|
||||||
disabled: PropTypes.looseBool,
|
|
||||||
id: PropTypes.string,
|
|
||||||
// onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// export interface SelectionBoxState {
|
|
||||||
// checked?: PropTypes.looseBool,
|
|
||||||
// }
|
|
||||||
|
|
||||||
export const FilterMenuProps = {
|
|
||||||
locale: TableLocale,
|
|
||||||
selectedKeys: PropTypes.array,
|
|
||||||
column: PropTypes.object,
|
|
||||||
confirmFilter: PropTypes.func,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
dropdownPrefixCls: PropTypes.string,
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
handleFilter: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
// export interface FilterMenuState {
|
|
||||||
// selectedKeys: string[];
|
|
||||||
// keyPathOfSelectedItem: { [key: string]: string };
|
|
||||||
// visible?: PropTypes.looseBool,
|
|
||||||
// }
|
|
||||||
Loading…
Reference in New Issue