zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(BasicTable->rowKey&scroll): declear and usage about rowKey and scroll (#3541) 

* fix(rowKey&scroll): declear and usage about rowKey and scroll

* fix: key/keyValue type declare fix
This commit is contained in:
xachary 2024-01-12 14:20:45 +08:00 committed by GitHub
parent 69c36021fa
commit e23e3383dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 184 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Table/src/components/TableFooter.vue
View File

@ -1,60 +1,61 @@
<template>
<Table
v-if="summaryFunc || summaryData"
v-if="!!props.summaryFunc || props.summaryData"
:showHeader="false"
:bordered="false"
:pagination="false"
:dataSource="getDataSource"
:rowKey="(r) => r[rowKey]"
:rowKey="props.rowKey"
:columns="getColumns"
tableLayout="fixed"
:scroll="scroll"
:scroll="props.scroll"
/>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import { unref, computed, toRaw } from 'vue';
import { Table } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import { isFunction } from '@/utils/is';
import type { BasicColumn } from '../types/table';
import type { BasicColumn, BasicTableProps } from '../types/table';
import { INDEX_COLUMN_FLAG } from '../const';
import { propTypes } from '@/utils/propTypes';
import { useTableContext } from '../hooks/useTableContext';
import { ColumnType } from 'ant-design-vue/es/table/interface';
import { parseRowKey } from '../helper';
defineOptions({ name: 'BasicTableFooter' });
const props = defineProps({
summaryFunc: {
type: Function as PropType<Fn>,
const props = withDefaults(
defineProps<{
summaryFunc?: Fn | null;
summaryData?: Recordable[] | null;
scroll?: BasicTableProps['scroll'];
rowKey?: BasicTableProps['rowKey'];
}>(),
{
summaryFunc: null,
summaryData: null,
rowKey: '',
},
summaryData: {
type: Array as PropType<Recordable[]>,
},
scroll: {
type: Object as PropType<Recordable>,
},
rowKey: propTypes.string.def('key'),
});
);
const SUMMARY_ROW_KEY = '_row';
const SUMMARY_INDEX_KEY = '_index';
const table = useTableContext();
const getDataSource = computed((): Recordable[] => {
const { summaryFunc, summaryData } = props;
if (summaryData?.length) {
summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
return summaryData;
if (props.summaryData?.length) {
props.summaryData.forEach((item, i) => {
item[parseRowKey(props.rowKey, item)] = `${i}`;
});
return props.summaryData;
}
if (!isFunction(summaryFunc)) {
if (!isFunction(props.summaryFunc)) {
return [];
}
let dataSource = toRaw(unref(table.getDataSource()));
dataSource = summaryFunc(dataSource);
dataSource = props.summaryFunc(dataSource);
dataSource.forEach((item, i) => {
item[props.rowKey] = `${i}`;
item[parseRowKey(props.rowKey, item)] = `${i}`;
});
return dataSource;
});

6
src/components/Table/src/components/editable/EditableCell.vue
View File

@ -16,6 +16,7 @@
import { pick, set } from 'lodash-es';
import { treeToList } from '@/utils/helper/treeHelper';
import { Spin } from 'ant-design-vue';
import { parseRowKey } from '../../helper';
export default defineComponent({
name: 'EditableCell',
@ -260,7 +261,8 @@
const { getBindValues } = table;
const { beforeEditSubmit, columns, rowKey } = unref(getBindValues);
const rowKeyValue = typeof rowKey === 'string' ? rowKey : rowKey ? rowKey(record) : '';
const rowKeyParsed = parseRowKey(rowKey, record);
if (beforeEditSubmit && isFunction(beforeEditSubmit)) {
spinning.value = true;
@ -271,7 +273,7 @@
let result: any = true;
try {
result = await beforeEditSubmit({
record: pick(record, [rowKeyValue, ...keys]),
record: pick(record, [rowKeyParsed, ...keys]),
index,
key: dataKey as string,
value,

28
src/components/Table/src/helper.ts Normal file
View File

@ -0,0 +1,28 @@
import { ROW_KEY } from './const';
import type { BasicTableProps } from './types/table';
export function parseRowKey<RecordType = any>(
rowKey: BasicTableProps['rowKey'],
record: RecordType,
autoCreateKey?: boolean,
): number | string {
if (autoCreateKey) {
return ROW_KEY;
} else {
if (typeof rowKey === 'string') {
return rowKey;
} else if (rowKey) {
return rowKey(record);
} else {
return ROW_KEY;
}
}
}
export function parseRowKeyValue<RecordType = any>(
rowKey: BasicTableProps['rowKey'],
record: RecordType,
autoCreateKey?: boolean,
): number | string {
return record[parseRowKey(rowKey, record, autoCreateKey)];
}

47
src/components/Table/src/hooks/useCustomRow.ts
View File

@ -1,35 +1,18 @@
import type { ComputedRef } from 'vue';
import type { BasicTableProps } from '../types/table';
import { unref } from 'vue';
import { ROW_KEY } from '../const';
import { isString, isFunction } from '@/utils/is';
import type { Key } from 'ant-design-vue/lib/table/interface';
import { parseRowKeyValue } from '../helper';
interface Options {
setSelectedRowKeys: (keys: Key[]) => void;
setSelectedRowKeys: (keyValues: Key[]) => void;
getSelectRowKeys: () => Key[];
clearSelectedRowKeys: () => void;
emit: EmitType;
getAutoCreateKey: ComputedRef<boolean | undefined>;
}
function getKey(
record: Recordable,
rowKey: string | ((record: Record<string, any>) => string) | undefined,
autoCreateKey?: boolean,
) {
if (!rowKey || autoCreateKey) {
return record[ROW_KEY];
}
if (isString(rowKey)) {
return record[rowKey];
}
if (isFunction(rowKey)) {
return record[rowKey(record)];
}
return null;
}
export function useCustomRow(
propsRef: ComputedRef<BasicTableProps>,
{ setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options,
@ -41,9 +24,9 @@ export function useCustomRow(
function handleClick() {
const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef);
if (!rowSelection || !clickToRowSelect) return;
const keys = getSelectRowKeys() || [];
const key = getKey(record, rowKey, unref(getAutoCreateKey));
if (key === null) return;
const keyValues = getSelectRowKeys() || [];
const keyValue = parseRowKeyValue(rowKey, record, unref(getAutoCreateKey));
if (!keyValue) return;
const isCheckbox = rowSelection.type === 'checkbox';
if (isCheckbox) {
@ -55,24 +38,24 @@ export function useCustomRow(
// 找到Checkbox，检查是否为disabled
const checkBox = tr.querySelector('input[type=checkbox]');
if (!checkBox || checkBox.hasAttribute('disabled')) return;
if (!keys.includes(key)) {
keys.push(key);
setSelectedRowKeys(keys);
if (!keyValues.includes(keyValue)) {
keyValues.push(keyValue);
setSelectedRowKeys(keyValues);
return;
}
const keyIndex = keys.findIndex((item) => item === key);
keys.splice(keyIndex, 1);
setSelectedRowKeys(keys);
const keyIndex = keyValues.findIndex((item) => item === keyValue);
keyValues.splice(keyIndex, 1);
setSelectedRowKeys(keyValues);
return;
}
const isRadio = rowSelection.type === 'radio';
if (isRadio) {
if (!keys.includes(key)) {
if (keys.length) {
if (!keyValues.includes(keyValue)) {
if (keyValues.length) {
clearSelectedRowKeys();
}
setSelectedRowKeys([key]);
setSelectedRowKeys([keyValue]);
return;
}
clearSelectedRowKeys();

59
src/components/Table/src/hooks/useDataSource.ts
View File

@ -16,6 +16,8 @@ import { buildUUID } from '@/utils/uuid';
import { isFunction, isBoolean, isObject } from '@/utils/is';
import { get, cloneDeep, merge } from 'lodash-es';
import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
import { parseRowKeyValue } from '../helper';
import type { Key } from 'ant-design-vue/lib/table/interface';
interface ActionType {
getPaginationInfo: ComputedRef<boolean | PaginationProps>;
@ -138,7 +140,7 @@ export function useDataSource(
return unref(dataSourceRef);
});
async function updateTableData(index: number, key: string, value: any) {
async function updateTableData(index: number, key: Key, value: any) {
const record = dataSourceRef.value[index];
if (record) {
dataSourceRef.value[index][key] = value;
@ -146,11 +148,8 @@ export function useDataSource(
return dataSourceRef.value[index];
}
function updateTableDataRecord(
rowKey: string | number,
record: Recordable,
): Recordable | undefined {
const row = findTableDataRecord(rowKey);
function updateTableDataRecord(keyValue: Key, record: Recordable): Recordable | undefined {
const row = findTableDataRecord(keyValue);
if (row) {
for (const field in row) {
@ -160,34 +159,28 @@ export function useDataSource(
}
}
function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
function deleteTableDataRecord(keyValues: Key | Key[]) {
if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
const rowKeyName = unref(getRowKey);
if (!rowKeyName) return;
const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
const delKeyValues = !Array.isArray(keyValues) ? [keyValues] : keyValues;
function deleteRow(data, key) {
const row: { index: number; data: [] } = findRow(data, key);
function deleteRow(data, keyValue) {
const row: { index: number; data: [] } = findRow(data, keyValue);
if (row === null || row.index === -1) {
return;
}
row.data.splice(row.index, 1);
function findRow(data, key) {
function findRow(data, keyValue) {
if (data === null || data === undefined) {
return null;
}
for (let i = 0; i < data.length; i++) {
const row = data[i];
let targetKeyName: string = rowKeyName as string;
if (isFunction(rowKeyName)) {
targetKeyName = rowKeyName(row);
}
if (row[targetKeyName] === key) {
if (parseRowKeyValue(unref(getRowKey), row) === keyValue) {
return { index: i, data };
}
if (row.children?.length > 0) {
const result = findRow(row.children, key);
const result = findRow(row.children, keyValue);
if (result != null) {
return result;
}
@ -197,9 +190,9 @@ export function useDataSource(
}
}
for (const key of rowKeys) {
deleteRow(dataSourceRef.value, key);
deleteRow(unref(propsRef).dataSource, key);
for (const keyValue of delKeyValues) {
deleteRow(dataSourceRef.value, keyValue);
deleteRow(unref(propsRef).dataSource, keyValue);
}
setPagination({
total: unref(propsRef).dataSource?.length,
@ -217,40 +210,22 @@ export function useDataSource(
return unref(dataSourceRef);
}
function findTableDataRecord(rowKey: string | number) {
function findTableDataRecord(keyValue: Key) {
if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
const rowKeyName = unref(getRowKey);
if (!rowKeyName) return;
const { childrenColumnName = 'children' } = unref(propsRef);
const findRow = (array: any[]) => {
let ret;
array.some(function iter(r) {
if (typeof rowKeyName === 'function') {
if ((rowKeyName(r) as string) === rowKey) {
if (parseRowKeyValue(unref(getRowKey), r) === keyValue) {
ret = r;
return true;
}
} else {
if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
ret = r;
return true;
}
}
return r[childrenColumnName] && r[childrenColumnName].some(iter);
});
return ret;
};
// const row = dataSourceRef.value.find(r => {
// if (typeof rowKeyName === 'function') {
// return (rowKeyName(r) as string) === rowKey
// } else {
// return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey
// }
// })
return findRow(dataSourceRef.value);
}

46
src/components/Table/src/hooks/useRowSelection.ts
View File

@ -5,6 +5,7 @@ import { ROW_KEY } from '../const';
import { omit } from 'lodash-es';
import { findNodeAll } from '@/utils/helper/treeHelper';
import type { Key } from 'ant-design-vue/lib/table/interface';
import { parseRowKey, parseRowKeyValue } from '../helper';
export function useRowSelection(
propsRef: ComputedRef<BasicTableProps>,
@ -31,13 +32,10 @@ export function useRowSelection(
} else {
// 点击 checkbox/radiobox 触发
// 取出【当前页】所有 keys
const rowKey = propsRef.value.rowKey;
const currentPageKeys = tableData.value.map(
(o) => o[(isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'],
);
// 取出【当前页】所有 keyValues
const currentPageKeys = tableData.value.map((o) => parseRowKeyValue(unref(getRowKey), o));
// 从【所有分页】已选的keys，且属于【当前页】的部分
// 从【所有分页】已选的 keyValues，且属于【当前页】的部分
for (const selectedKey of selectedRowKeysRef.value.filter((k) =>
currentPageKeys.includes(k),
)) {
@ -60,7 +58,7 @@ export function useRowSelection(
// 新增勾选
selectedRowKeysRef.value.push(selectedKey);
const record = selectedRows.find(
(o) => o[(isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'] === selectedKey,
(o) => parseRowKeyValue(unref(getRowKey), o) === selectedKey,
);
if (record) {
selectedRowRef.value.push(record);
@ -113,30 +111,40 @@ export function useRowSelection(
return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
});
function setSelectedRowKeys(rowKeys?: Key[]) {
selectedRowKeysRef.value = rowKeys || [];
function setSelectedRowKeys(keyValues?: Key[]) {
selectedRowKeysRef.value = keyValues || [];
const rows = toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef)));
const allSelectedRows = findNodeAll(
toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))),
(item) => rowKeys?.includes(item[unref(getRowKey) as string]),
rows,
(item) => keyValues?.includes(parseRowKeyValue(unref(getRowKey), item)),
{
children: propsRef.value.childrenColumnName ?? 'children',
},
);
const trueSelectedRows: any[] = [];
rowKeys?.forEach((key: Key) => {
const found = allSelectedRows.find((item) => item[unref(getRowKey) as string] === key);
keyValues?.forEach((keyValue: Key) => {
const found = allSelectedRows.find(
(item) => parseRowKeyValue(unref(getRowKey), item) === keyValue,
);
found && trueSelectedRows.push(found);
if (found) {
trueSelectedRows.push(found);
} else {
// 跨页的时候，非本页数据无法得到，暂如此处理
// tableData or selectedRowRef 总有数据
if (rows[0]) {
trueSelectedRows.push({ [parseRowKey(unref(getRowKey), rows[0])]: keyValue });
}
}
});
selectedRowRef.value = trueSelectedRows;
}
function setSelectedRows(rows: Recordable[]) {
const { rowKey } = unref(propsRef);
selectedRowRef.value = rows;
selectedRowKeysRef.value = selectedRowRef.value.map((o) => {
const key = (isFunction(rowKey) ? rowKey(o) : rowKey) || 'key';
return o[key];
});
selectedRowKeysRef.value = selectedRowRef.value.map((o) =>
parseRowKeyValue(unref(getRowKey), o),
);
}
function clearSelectedRowKeys() {
@ -144,7 +152,7 @@ export function useRowSelection(
selectedRowKeysRef.value = [];
}
function deleteSelectRowByKey(key: string) {
function deleteSelectRowByKey(key: Key) {
const selectedRowKeys = unref(selectedRowKeysRef);
const index = selectedRowKeys.findIndex((item) => item === key);
if (index !== -1) {

28
src/components/Table/src/hooks/useTable.ts
View File

@ -102,8 +102,8 @@ export function useTable(tableProps?: Props): [
setPagination: (info: Partial<PaginationProps>) => {
return getTableInstance().setPagination(info);
},
deleteSelectRowByKey: (key: string) => {
getTableInstance().deleteSelectRowByKey(key);
deleteSelectRowByKey: (keyValue: Key) => {
getTableInstance().deleteSelectRowByKey(keyValue);
},
getSelectRowKeys: () => {
return toRaw(getTableInstance().getSelectRowKeys());
@ -114,8 +114,8 @@ export function useTable(tableProps?: Props): [
clearSelectedRowKeys: () => {
getTableInstance().clearSelectedRowKeys();
},
setSelectedRowKeys: (keys: (string | number)[]) => {
getTableInstance().setSelectedRowKeys(keys);
setSelectedRowKeys: (keyValues: Key[]) => {
getTableInstance().setSelectedRowKeys(keyValues);
},
getPaginationRef: () => {
return getTableInstance().getPaginationRef();
@ -126,17 +126,17 @@ export function useTable(tableProps?: Props): [
updateTableData: (index: number, key: string, value: any) => {
return getTableInstance().updateTableData(index, key, value);
},
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => {
return getTableInstance().deleteTableDataRecord(rowKey);
deleteTableDataRecord: (keyValues: Key | Key[]) => {
return getTableInstance().deleteTableDataRecord(keyValues);
},
insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
return getTableInstance().insertTableDataRecord(record, index);
},
updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
return getTableInstance().updateTableDataRecord(rowKey, record);
updateTableDataRecord: (keyValue: Key, record: Recordable) => {
return getTableInstance().updateTableDataRecord(keyValue, record);
},
findTableDataRecord: (rowKey: string | number) => {
return getTableInstance().findTableDataRecord(rowKey);
findTableDataRecord: (keyValue: Key) => {
return getTableInstance().findTableDataRecord(keyValue);
},
getRowSelection: () => {
return toRaw(getTableInstance().getRowSelection());
@ -159,11 +159,11 @@ export function useTable(tableProps?: Props): [
collapseAll: () => {
getTableInstance().collapseAll();
},
expandRows: (keys: Key[]) => {
getTableInstance().expandRows(keys);
expandRows: (keyValues: Key[]) => {
getTableInstance().expandRows(keyValues);
},
collapseRows: (keys: Key[]) => {
getTableInstance().collapseRows(keys);
collapseRows: (keyValues: Key[]) => {
getTableInstance().collapseRows(keyValues);
},
scrollTo: (pos: string) => {
getTableInstance().scrollTo(pos);

63
src/components/Table/src/hooks/useTableExpand.ts
View File

@ -2,13 +2,15 @@ import type { ComputedRef, Ref } from 'vue';
import type { BasicTableProps } from '../types/table';
import { computed, unref, ref, toRaw, nextTick } from 'vue';
import { ROW_KEY } from '../const';
import { parseRowKeyValue } from '../helper';
import type { Key } from 'ant-design-vue/lib/table/interface';
export function useTableExpand(
propsRef: ComputedRef<BasicTableProps>,
tableData: Ref<Recordable[]>,
emit: EmitType,
) {
const expandedRowKeys = ref<(string | number)[]>([]);
const expandedRowKeys = ref<Key[]>([]);
const getAutoCreateKey = computed(() => {
return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
@ -25,68 +27,68 @@ export function useTableExpand(
return {
expandedRowKeys: unref(expandedRowKeys),
onExpandedRowsChange: (keys: string[]) => {
expandedRowKeys.value = keys;
emit('expanded-rows-change', keys);
onExpandedRowsChange: (keyValues: string[]) => {
expandedRowKeys.value = keyValues;
emit('expanded-rows-change', keyValues);
},
};
});
function expandAll() {
const keys = getAllKeys();
expandedRowKeys.value = keys;
const keyValues = getAllKeys();
expandedRowKeys.value = keyValues;
}
function collapseAll() {
expandedRowKeys.value = [];
}
function expandRows(keys: (string | number)[]) {
function expandRows(keyValues: Key[]) {
// use row ID expands the specified table row
const { isTreeTable, expandRowByClick } = unref(propsRef);
if (!isTreeTable && !expandRowByClick) return;
expandedRowKeys.value = [...expandedRowKeys.value, ...keys];
expandedRowKeys.value = [...expandedRowKeys.value, ...keyValues];
}
function collapseRows(keys: (string | number)[]) {
function collapseRows(keyValues: Key[]) {
// use row ID collapses the specified table row
const { isTreeTable, expandRowByClick } = unref(propsRef);
if (!isTreeTable && !expandRowByClick) return;
expandedRowKeys.value = unref(expandedRowKeys).filter((key) => !keys.includes(key));
expandedRowKeys.value = unref(expandedRowKeys).filter(
(keyValue) => !keyValues.includes(keyValue),
);
}
function getAllKeys(data?: Recordable[]) {
const keys: string[] = [];
const keyValues: Array<number | string> = [];
const { childrenColumnName } = unref(propsRef);
toRaw(data || unref(tableData)).forEach((item) => {
keys.push(item[unref(getRowKey) as string]);
keyValues.push(parseRowKeyValue(unref(getRowKey), item));
const children = item[childrenColumnName || 'children'];
if (children?.length) {
keys.push(...getAllKeys(children));
keyValues.push(...getAllKeys(children));
}
});
return keys;
return keyValues;
}
// 获取展开路径 keys
// 获取展开路径 keyValues
function getKeyPaths(
records: Recordable[],
rowKey: string,
childrenColumnName: string,
key: string | number,
paths: Array<string | number>,
keyValue: Key,
paths: Array<Key>,
): boolean {
if (records.findIndex((record) => record[rowKey] === key) > -1) {
paths.push(key);
if (
records.findIndex((record) => parseRowKeyValue(unref(getRowKey), record) === keyValue) > -1
) {
paths.push(keyValue);
return true;
} else {
for (const record of records) {
const children = record[childrenColumnName];
if (
Array.isArray(children) &&
getKeyPaths(children, rowKey, childrenColumnName, key, paths)
) {
paths.push(record[rowKey]);
if (Array.isArray(children) && getKeyPaths(children, childrenColumnName, keyValue, paths)) {
paths.push(parseRowKeyValue(unref(getRowKey), record));
return true;
}
}
@ -95,10 +97,10 @@ export function useTableExpand(
}
// 手风琴展开
function expandRowAccordion(key: string | number, rowKey: string) {
function expandRowAccordion(keyValue: Key) {
const { childrenColumnName } = unref(propsRef);
const paths: Array<string | number> = [];
getKeyPaths(tableData.value, rowKey, childrenColumnName || 'children', key, paths);
const paths: Array<Key> = [];
getKeyPaths(tableData.value, childrenColumnName || 'children', keyValue, paths);
expandedRowKeys.value = paths;
}
@ -106,17 +108,14 @@ export function useTableExpand(
function handleTableExpand(expanded, record) {
// 手风琴开关
// isTreeTable 或 expandRowByClick 时支持
// rowKey 是字符串时支持
// 展开操作
if (
propsRef.value.accordion &&
(propsRef.value.isTreeTable || propsRef.value.expandRowByClick) &&
typeof getRowKey.value === 'string' &&
expanded
) {
const rowKey = getRowKey.value as string;
nextTick(() => {
expandRowAccordion(record[rowKey], rowKey);
expandRowAccordion(parseRowKeyValue(unref(getRowKey), record));
});
}
}

6
src/components/Table/src/hooks/useTableFooter.ts
View File

@ -6,11 +6,7 @@ import { useEventListener } from '@/hooks/event/useEventListener';
export function useTableFooter(
propsRef: ComputedRef<BasicTableProps>,
scrollRef: ComputedRef<{
x: string | number | true;
y: string | number | null;
scrollToFirstRowOnChange: boolean;
}>,
scrollRef: ComputedRef<BasicTableProps['scroll']>,
tableElRef: Ref<ComponentRef>,
getDataSourceRef: ComputedRef<Recordable>,
) {

2
src/components/Table/src/hooks/useTableScroll.ts
View File

@ -264,7 +264,7 @@ export function useTableScroll(
y: canResize ? tableHeight : null,
scrollToFirstRowOnChange: false,
...scroll,
};
} as BasicTableProps['scroll'];
});
return { getScrollRef, redoHeight };

14
src/components/Table/src/props.ts
View File

@ -8,11 +8,13 @@ import type {
TableCustomRecord,
TableRowSelection,
SizeType,
BasicTableProps,
} from './types/table';
import type { FormProps } from '@/components/Form';
import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
import { propTypes } from '@/utils/propTypes';
import type { Key } from 'ant-design-vue/lib/table/interface';
export const basicProps = {
clickToRowSelect: { type: Boolean, default: true },
@ -119,7 +121,7 @@ export const basicProps = {
default: null,
},
rowKey: {
type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
type: [String, Function] as PropType<BasicTableProps['rowKey']>,
default: '',
},
bordered: propTypes.bool,
@ -132,17 +134,11 @@ export const basicProps = {
type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
},
scroll: {
type: Object as PropType<{ x: number | string | true; y: number | string }>,
default: null,
type: Object as PropType<PropType<BasicTableProps['scroll']>>,
},
beforeEditSubmit: {
type: Function as PropType<
(data: {
record: Recordable;
index: number;
key: string | number;
value: any;
}) => Promise<any>
(data: { record: Recordable; index: number; key: Key; value: any }) => Promise<any>
>,
},
size: {

26
src/components/Table/src/types/table.ts
View File

@ -13,6 +13,8 @@ import { VueNode } from '@/utils/propTypes';
import { RoleEnum } from '@/enums/roleEnum';
import { FixedType } from 'ant-design-vue/es/vc-table/interface';
import AntDesignVueTable from 'ant-design-vue/es/table';
export declare type SortOrder = 'ascend' | 'descend';
export interface TableCurrentDataSource<T = Recordable> {
@ -22,8 +24,8 @@ export interface TableCurrentDataSource<T = Recordable> {
export interface TableRowSelection<T = any> extends ITableRowSelection {
/**
* Callback executed when selected rows change
* @param selectedRowKeys 已选的keys
* @param selectedRows 已选的records
* @param selectedRowKeys 已选的 keyValues
* @param selectedRows 已选的 records
* @param isClickCustomRow 是否是点击行触发（反之，就是点击checkbox/radiobox）
* @returns void
*/
@ -97,17 +99,17 @@ export interface TableActionType {
clearSelectedRowKeys: () => void;
expandAll: () => void;
collapseAll: () => void;
expandRows: (keys: (string | number)[]) => void;
collapseRows: (keys: (string | number)[]) => void;
expandRows: (keyValues: Key[]) => void;
collapseRows: (keyValues: Key[]) => void;
scrollTo: (pos: string) => void; // pos: id | "top" | "bottom"
getSelectRowKeys: () => Key[];
deleteSelectRowByKey: (key: string) => void;
deleteSelectRowByKey: (keyValue: Key) => void;
setPagination: (info: Partial<PaginationProps>) => void;
setTableData: <T = Recordable>(values: T[]) => void;
updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => void;
updateTableDataRecord: (keyValue: Key, record: Recordable) => Recordable | void;
deleteTableDataRecord: (keyValues: Key | Key[]) => void;
insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => Recordable[] | void;
findTableDataRecord: (rowKey: string | number) => Recordable | void;
findTableDataRecord: (keyValue: Key) => Recordable | void;
getColumns: (opt?: GetColumnsParams) => BasicColumn[];
setColumns: (columns: BasicColumn[] | string[]) => void;
getDataSource: <T = Recordable>() => T[];
@ -115,7 +117,7 @@ export interface TableActionType {
setLoading: (loading: boolean) => void;
setProps: (props: Partial<BasicTableProps>) => void;
redoHeight: () => void;
setSelectedRowKeys: (rowKeys: Key[]) => void;
setSelectedRowKeys: (keyValues: Key[]) => void;
getPaginationRef: () => PaginationProps | boolean;
getSize: () => SizeType;
getRowSelection: () => TableRowSelection<Recordable>;
@ -214,7 +216,7 @@ export interface BasicTableProps<T = any> {
// 在分页改变的时候清空选项
clearSelectOnPageChange?: boolean;
//
rowKey?: string | ((record: Recordable) => string);
rowKey?: InstanceType<typeof AntDesignVueTable>['$props']['rowKey'];
// 数据
dataSource?: Recordable[];
// 标题右侧提示
@ -328,7 +330,7 @@ export interface BasicTableProps<T = any> {
* you need to add style .ant-table td { white-space: nowrap; }.
* @type object
*/
scroll?: { x?: number | string | true; y?: number | string };
scroll?: InstanceType<typeof AntDesignVueTable>['$props']['scroll'];
/**
* Whether to show table header
@ -395,7 +397,7 @@ export interface BasicTableProps<T = any> {
beforeEditSubmit?: (data: {
record: Recordable;
index: number;
key: string | number;
key: Key;
value: any;
}) => Promise<any>;