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

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

@ -16,6 +16,7 @@
import { pick, set } from 'lodash-es'; import { pick, set } from 'lodash-es';
import { treeToList } from '@/utils/helper/treeHelper'; import { treeToList } from '@/utils/helper/treeHelper';
import { Spin } from 'ant-design-vue'; import { Spin } from 'ant-design-vue';
import { parseRowKey } from '../../helper';
export default defineComponent({ export default defineComponent({
name: 'EditableCell', name: 'EditableCell',
@ -260,7 +261,8 @@
const { getBindValues } = table; const { getBindValues } = table;
const { beforeEditSubmit, columns, rowKey } = unref(getBindValues); const { beforeEditSubmit, columns, rowKey } = unref(getBindValues);
const rowKeyValue = typeof rowKey === 'string' ? rowKey : rowKey ? rowKey(record) : '';
const rowKeyParsed = parseRowKey(rowKey, record);
if (beforeEditSubmit && isFunction(beforeEditSubmit)) { if (beforeEditSubmit && isFunction(beforeEditSubmit)) {
spinning.value = true; spinning.value = true;
@ -271,7 +273,7 @@
let result: any = true; let result: any = true;
try { try {
result = await beforeEditSubmit({ result = await beforeEditSubmit({
record: pick(record, [rowKeyValue, ...keys]), record: pick(record, [rowKeyParsed, ...keys]),
index, index,
key: dataKey as string, key: dataKey as string,
value, 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 { ComputedRef } from 'vue';
import type { BasicTableProps } from '../types/table'; import type { BasicTableProps } from '../types/table';
import { unref } from 'vue'; 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 type { Key } from 'ant-design-vue/lib/table/interface';
import { parseRowKeyValue } from '../helper';
interface Options { interface Options {
setSelectedRowKeys: (keys: Key[]) => void; setSelectedRowKeys: (keyValues: Key[]) => void;
getSelectRowKeys: () => Key[]; getSelectRowKeys: () => Key[];
clearSelectedRowKeys: () => void; clearSelectedRowKeys: () => void;
emit: EmitType; emit: EmitType;
getAutoCreateKey: ComputedRef<boolean | undefined>; 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( export function useCustomRow(
propsRef: ComputedRef<BasicTableProps>, propsRef: ComputedRef<BasicTableProps>,
{ setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options, { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options,
@ -41,9 +24,9 @@ export function useCustomRow(
function handleClick() { function handleClick() {
const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef); const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef);
if (!rowSelection || !clickToRowSelect) return; if (!rowSelection || !clickToRowSelect) return;
const keys = getSelectRowKeys() || []; const keyValues = getSelectRowKeys() || [];
const key = getKey(record, rowKey, unref(getAutoCreateKey)); const keyValue = parseRowKeyValue(rowKey, record, unref(getAutoCreateKey));
if (key === null) return; if (!keyValue) return;
const isCheckbox = rowSelection.type === 'checkbox'; const isCheckbox = rowSelection.type === 'checkbox';
if (isCheckbox) { if (isCheckbox) {
@ -55,24 +38,24 @@ export function useCustomRow(
// 找到Checkbox，检查是否为disabled // 找到Checkbox，检查是否为disabled
const checkBox = tr.querySelector('input[type=checkbox]'); const checkBox = tr.querySelector('input[type=checkbox]');
if (!checkBox || checkBox.hasAttribute('disabled')) return; if (!checkBox || checkBox.hasAttribute('disabled')) return;
if (!keys.includes(key)) { if (!keyValues.includes(keyValue)) {
keys.push(key); keyValues.push(keyValue);
setSelectedRowKeys(keys); setSelectedRowKeys(keyValues);
return; return;
} }
const keyIndex = keys.findIndex((item) => item === key); const keyIndex = keyValues.findIndex((item) => item === keyValue);
keys.splice(keyIndex, 1); keyValues.splice(keyIndex, 1);
setSelectedRowKeys(keys); setSelectedRowKeys(keyValues);
return; return;
} }
const isRadio = rowSelection.type === 'radio'; const isRadio = rowSelection.type === 'radio';
if (isRadio) { if (isRadio) {
if (!keys.includes(key)) { if (!keyValues.includes(keyValue)) {
if (keys.length) { if (keyValues.length) {
clearSelectedRowKeys(); clearSelectedRowKeys();
} }
setSelectedRowKeys([key]); setSelectedRowKeys([keyValue]);
return; return;
} }
clearSelectedRowKeys(); clearSelectedRowKeys();

63
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 { isFunction, isBoolean, isObject } from '@/utils/is';
import { get, cloneDeep, merge } from 'lodash-es'; import { get, cloneDeep, merge } from 'lodash-es';
import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const'; 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 { interface ActionType {
getPaginationInfo: ComputedRef<boolean | PaginationProps>; getPaginationInfo: ComputedRef<boolean | PaginationProps>;
@ -138,7 +140,7 @@ export function useDataSource(
return unref(dataSourceRef); 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]; const record = dataSourceRef.value[index];
if (record) { if (record) {
dataSourceRef.value[index][key] = value; dataSourceRef.value[index][key] = value;
@ -146,11 +148,8 @@ export function useDataSource(
return dataSourceRef.value[index]; return dataSourceRef.value[index];
} }
function updateTableDataRecord( function updateTableDataRecord(keyValue: Key, record: Recordable): Recordable | undefined {
rowKey: string | number, const row = findTableDataRecord(keyValue);
record: Recordable,
): Recordable | undefined {
const row = findTableDataRecord(rowKey);
if (row) { if (row) {
for (const field in 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; if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
const rowKeyName = unref(getRowKey); const delKeyValues = !Array.isArray(keyValues) ? [keyValues] : keyValues;
if (!rowKeyName) return;
const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
function deleteRow(data, key) { function deleteRow(data, keyValue) {
const row: { index: number; data: [] } = findRow(data, key); const row: { index: number; data: [] } = findRow(data, keyValue);
if (row === null || row.index === -1) { if (row === null || row.index === -1) {
return; return;
} }
row.data.splice(row.index, 1); row.data.splice(row.index, 1);
function findRow(data, key) { function findRow(data, keyValue) {
if (data === null || data === undefined) { if (data === null || data === undefined) {
return null; return null;
} }
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const row = data[i]; const row = data[i];
let targetKeyName: string = rowKeyName as string; if (parseRowKeyValue(unref(getRowKey), row) === keyValue) {
if (isFunction(rowKeyName)) {
targetKeyName = rowKeyName(row);
}
if (row[targetKeyName] === key) {
return { index: i, data }; return { index: i, data };
} }
if (row.children?.length > 0) { if (row.children?.length > 0) {
const result = findRow(row.children, key); const result = findRow(row.children, keyValue);
if (result != null) { if (result != null) {
return result; return result;
} }
@ -197,9 +190,9 @@ export function useDataSource(
} }
} }
for (const key of rowKeys) { for (const keyValue of delKeyValues) {
deleteRow(dataSourceRef.value, key); deleteRow(dataSourceRef.value, keyValue);
deleteRow(unref(propsRef).dataSource, key); deleteRow(unref(propsRef).dataSource, keyValue);
} }
setPagination({ setPagination({
total: unref(propsRef).dataSource?.length, total: unref(propsRef).dataSource?.length,
@ -217,40 +210,22 @@ export function useDataSource(
return unref(dataSourceRef); return unref(dataSourceRef);
} }
function findTableDataRecord(rowKey: string | number) { function findTableDataRecord(keyValue: Key) {
if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
const rowKeyName = unref(getRowKey);
if (!rowKeyName) return;
const { childrenColumnName = 'children' } = unref(propsRef); const { childrenColumnName = 'children' } = unref(propsRef);
const findRow = (array: any[]) => { const findRow = (array: any[]) => {
let ret; let ret;
array.some(function iter(r) { array.some(function iter(r) {
if (typeof rowKeyName === 'function') { if (parseRowKeyValue(unref(getRowKey), r) === keyValue) {
if ((rowKeyName(r) as string) === rowKey) { ret = r;
ret = r; return true;
return true;
}
} else {
if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
ret = r;
return true;
}
} }
return r[childrenColumnName] && r[childrenColumnName].some(iter); return r[childrenColumnName] && r[childrenColumnName].some(iter);
}); });
return ret; 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); 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 { omit } from 'lodash-es';
import { findNodeAll } from '@/utils/helper/treeHelper'; import { findNodeAll } from '@/utils/helper/treeHelper';
import type { Key } from 'ant-design-vue/lib/table/interface'; import type { Key } from 'ant-design-vue/lib/table/interface';
import { parseRowKey, parseRowKeyValue } from '../helper';
export function useRowSelection( export function useRowSelection(
propsRef: ComputedRef<BasicTableProps>, propsRef: ComputedRef<BasicTableProps>,
@ -31,13 +32,10 @@ export function useRowSelection(
} else { } else {
// 点击 checkbox/radiobox 触发 // 点击 checkbox/radiobox 触发
// 取出【当前页】所有 keys // 取出【当前页】所有 keyValues
const rowKey = propsRef.value.rowKey; const currentPageKeys = tableData.value.map((o) => parseRowKeyValue(unref(getRowKey), o));
const currentPageKeys = tableData.value.map(
(o) => o[(isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'],
);
// 从【所有分页】已选的keys，且属于【当前页】的部分 // 从【所有分页】已选的 keyValues，且属于【当前页】的部分
for (const selectedKey of selectedRowKeysRef.value.filter((k) => for (const selectedKey of selectedRowKeysRef.value.filter((k) =>
currentPageKeys.includes(k), currentPageKeys.includes(k),
)) { )) {
@ -60,7 +58,7 @@ export function useRowSelection(
// 新增勾选 // 新增勾选
selectedRowKeysRef.value.push(selectedKey); selectedRowKeysRef.value.push(selectedKey);
const record = selectedRows.find( const record = selectedRows.find(
(o) => o[(isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'] === selectedKey, (o) => parseRowKeyValue(unref(getRowKey), o) === selectedKey,
); );
if (record) { if (record) {
selectedRowRef.value.push(record); selectedRowRef.value.push(record);
@ -113,30 +111,40 @@ export function useRowSelection(
return unref(getAutoCreateKey) ? ROW_KEY : rowKey; return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
}); });
function setSelectedRowKeys(rowKeys?: Key[]) { function setSelectedRowKeys(keyValues?: Key[]) {
selectedRowKeysRef.value = rowKeys || []; selectedRowKeysRef.value = keyValues || [];
const rows = toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef)));
const allSelectedRows = findNodeAll( const allSelectedRows = findNodeAll(
toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))), rows,
(item) => rowKeys?.includes(item[unref(getRowKey) as string]), (item) => keyValues?.includes(parseRowKeyValue(unref(getRowKey), item)),
{ {
children: propsRef.value.childrenColumnName ?? 'children', children: propsRef.value.childrenColumnName ?? 'children',
}, },
); );
const trueSelectedRows: any[] = []; const trueSelectedRows: any[] = [];
rowKeys?.forEach((key: Key) => { keyValues?.forEach((keyValue: Key) => {
const found = allSelectedRows.find((item) => item[unref(getRowKey) as string] === key); const found = allSelectedRows.find(
(item) => parseRowKeyValue(unref(getRowKey), item) === keyValue,
);
found && trueSelectedRows.push(found); 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; selectedRowRef.value = trueSelectedRows;
} }
function setSelectedRows(rows: Recordable[]) { function setSelectedRows(rows: Recordable[]) {
const { rowKey } = unref(propsRef);
selectedRowRef.value = rows; selectedRowRef.value = rows;
selectedRowKeysRef.value = selectedRowRef.value.map((o) => { selectedRowKeysRef.value = selectedRowRef.value.map((o) =>
const key = (isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'; parseRowKeyValue(unref(getRowKey), o),
return o[key]; );
});
} }
function clearSelectedRowKeys() { function clearSelectedRowKeys() {
@ -144,7 +152,7 @@ export function useRowSelection(
selectedRowKeysRef.value = []; selectedRowKeysRef.value = [];
} }
function deleteSelectRowByKey(key: string) { function deleteSelectRowByKey(key: Key) {
const selectedRowKeys = unref(selectedRowKeysRef); const selectedRowKeys = unref(selectedRowKeysRef);
const index = selectedRowKeys.findIndex((item) => item === key); const index = selectedRowKeys.findIndex((item) => item === key);
if (index !== -1) { 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>) => { setPagination: (info: Partial<PaginationProps>) => {
return getTableInstance().setPagination(info); return getTableInstance().setPagination(info);
}, },
deleteSelectRowByKey: (key: string) => { deleteSelectRowByKey: (keyValue: Key) => {
getTableInstance().deleteSelectRowByKey(key); getTableInstance().deleteSelectRowByKey(keyValue);
}, },
getSelectRowKeys: () => { getSelectRowKeys: () => {
return toRaw(getTableInstance().getSelectRowKeys()); return toRaw(getTableInstance().getSelectRowKeys());
@ -114,8 +114,8 @@ export function useTable(tableProps?: Props): [
clearSelectedRowKeys: () => { clearSelectedRowKeys: () => {
getTableInstance().clearSelectedRowKeys(); getTableInstance().clearSelectedRowKeys();
}, },
setSelectedRowKeys: (keys: (string | number)[]) => { setSelectedRowKeys: (keyValues: Key[]) => {
getTableInstance().setSelectedRowKeys(keys); getTableInstance().setSelectedRowKeys(keyValues);
}, },
getPaginationRef: () => { getPaginationRef: () => {
return getTableInstance().getPaginationRef(); return getTableInstance().getPaginationRef();
@ -126,17 +126,17 @@ export function useTable(tableProps?: Props): [
updateTableData: (index: number, key: string, value: any) => { updateTableData: (index: number, key: string, value: any) => {
return getTableInstance().updateTableData(index, key, value); return getTableInstance().updateTableData(index, key, value);
}, },
deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => { deleteTableDataRecord: (keyValues: Key | Key[]) => {
return getTableInstance().deleteTableDataRecord(rowKey); return getTableInstance().deleteTableDataRecord(keyValues);
}, },
insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => { insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
return getTableInstance().insertTableDataRecord(record, index); return getTableInstance().insertTableDataRecord(record, index);
}, },
updateTableDataRecord: (rowKey: string | number, record: Recordable) => { updateTableDataRecord: (keyValue: Key, record: Recordable) => {
return getTableInstance().updateTableDataRecord(rowKey, record); return getTableInstance().updateTableDataRecord(keyValue, record);
}, },
findTableDataRecord: (rowKey: string | number) => { findTableDataRecord: (keyValue: Key) => {
return getTableInstance().findTableDataRecord(rowKey); return getTableInstance().findTableDataRecord(keyValue);
}, },
getRowSelection: () => { getRowSelection: () => {
return toRaw(getTableInstance().getRowSelection()); return toRaw(getTableInstance().getRowSelection());
@ -159,11 +159,11 @@ export function useTable(tableProps?: Props): [
collapseAll: () => { collapseAll: () => {
getTableInstance().collapseAll(); getTableInstance().collapseAll();
}, },
expandRows: (keys: Key[]) => { expandRows: (keyValues: Key[]) => {
getTableInstance().expandRows(keys); getTableInstance().expandRows(keyValues);
}, },
collapseRows: (keys: Key[]) => { collapseRows: (keyValues: Key[]) => {
getTableInstance().collapseRows(keys); getTableInstance().collapseRows(keyValues);
}, },
scrollTo: (pos: string) => { scrollTo: (pos: string) => {
getTableInstance().scrollTo(pos); 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 type { BasicTableProps } from '../types/table';
import { computed, unref, ref, toRaw, nextTick } from 'vue'; import { computed, unref, ref, toRaw, nextTick } from 'vue';
import { ROW_KEY } from '../const'; import { ROW_KEY } from '../const';
import { parseRowKeyValue } from '../helper';
import type { Key } from 'ant-design-vue/lib/table/interface';
export function useTableExpand( export function useTableExpand(
propsRef: ComputedRef<BasicTableProps>, propsRef: ComputedRef<BasicTableProps>,
tableData: Ref<Recordable[]>, tableData: Ref<Recordable[]>,
emit: EmitType, emit: EmitType,
) { ) {
const expandedRowKeys = ref<(string | number)[]>([]); const expandedRowKeys = ref<Key[]>([]);
const getAutoCreateKey = computed(() => { const getAutoCreateKey = computed(() => {
return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey; return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
@ -25,68 +27,68 @@ export function useTableExpand(
return { return {
expandedRowKeys: unref(expandedRowKeys), expandedRowKeys: unref(expandedRowKeys),
onExpandedRowsChange: (keys: string[]) => { onExpandedRowsChange: (keyValues: string[]) => {
expandedRowKeys.value = keys; expandedRowKeys.value = keyValues;
emit('expanded-rows-change', keys); emit('expanded-rows-change', keyValues);
}, },
}; };
}); });
function expandAll() { function expandAll() {
const keys = getAllKeys(); const keyValues = getAllKeys();
expandedRowKeys.value = keys; expandedRowKeys.value = keyValues;
} }
function collapseAll() { function collapseAll() {
expandedRowKeys.value = []; expandedRowKeys.value = [];
} }
function expandRows(keys: (string | number)[]) { function expandRows(keyValues: Key[]) {
// use row ID expands the specified table row // use row ID expands the specified table row
const { isTreeTable, expandRowByClick } = unref(propsRef); const { isTreeTable, expandRowByClick } = unref(propsRef);
if (!isTreeTable && !expandRowByClick) return; 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 // use row ID collapses the specified table row
const { isTreeTable, expandRowByClick } = unref(propsRef); const { isTreeTable, expandRowByClick } = unref(propsRef);
if (!isTreeTable && !expandRowByClick) return; 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[]) { function getAllKeys(data?: Recordable[]) {
const keys: string[] = []; const keyValues: Array<number | string> = [];
const { childrenColumnName } = unref(propsRef); const { childrenColumnName } = unref(propsRef);
toRaw(data || unref(tableData)).forEach((item) => { toRaw(data || unref(tableData)).forEach((item) => {
keys.push(item[unref(getRowKey) as string]); keyValues.push(parseRowKeyValue(unref(getRowKey), item));
const children = item[childrenColumnName || 'children']; const children = item[childrenColumnName || 'children'];
if (children?.length) { if (children?.length) {
keys.push(...getAllKeys(children)); keyValues.push(...getAllKeys(children));
} }
}); });
return keys; return keyValues;
} }
// 获取展开路径 keys // 获取展开路径 keyValues
function getKeyPaths( function getKeyPaths(
records: Recordable[], records: Recordable[],
rowKey: string,
childrenColumnName: string, childrenColumnName: string,
key: string | number, keyValue: Key,
paths: Array<string | number>, paths: Array<Key>,
): boolean { ): boolean {
if (records.findIndex((record) => record[rowKey] === key) > -1) { if (
paths.push(key); records.findIndex((record) => parseRowKeyValue(unref(getRowKey), record) === keyValue) > -1
) {
paths.push(keyValue);
return true; return true;
} else { } else {
for (const record of records) { for (const record of records) {
const children = record[childrenColumnName]; const children = record[childrenColumnName];
if ( if (Array.isArray(children) && getKeyPaths(children, childrenColumnName, keyValue, paths)) {
Array.isArray(children) && paths.push(parseRowKeyValue(unref(getRowKey), record));
getKeyPaths(children, rowKey, childrenColumnName, key, paths)
) {
paths.push(record[rowKey]);
return true; 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 { childrenColumnName } = unref(propsRef);
const paths: Array<string | number> = []; const paths: Array<Key> = [];
getKeyPaths(tableData.value, rowKey, childrenColumnName || 'children', key, paths); getKeyPaths(tableData.value, childrenColumnName || 'children', keyValue, paths);
expandedRowKeys.value = paths; expandedRowKeys.value = paths;
} }
@ -106,17 +108,14 @@ export function useTableExpand(
function handleTableExpand(expanded, record) { function handleTableExpand(expanded, record) {
// 手风琴开关 // 手风琴开关
// isTreeTable 或 expandRowByClick 时支持 // isTreeTable 或 expandRowByClick 时支持
// rowKey 是字符串时支持
// 展开操作 // 展开操作
if ( if (
propsRef.value.accordion && propsRef.value.accordion &&
(propsRef.value.isTreeTable || propsRef.value.expandRowByClick) && (propsRef.value.isTreeTable || propsRef.value.expandRowByClick) &&
typeof getRowKey.value === 'string' &&
expanded expanded
) { ) {
const rowKey = getRowKey.value as string;
nextTick(() => { 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( export function useTableFooter(
propsRef: ComputedRef<BasicTableProps>, propsRef: ComputedRef<BasicTableProps>,
scrollRef: ComputedRef<{ scrollRef: ComputedRef<BasicTableProps['scroll']>,
x: string | number | true;
y: string | number | null;
scrollToFirstRowOnChange: boolean;
}>,
tableElRef: Ref<ComponentRef>, tableElRef: Ref<ComponentRef>,
getDataSourceRef: ComputedRef<Recordable>, getDataSourceRef: ComputedRef<Recordable>,
) { ) {

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

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

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

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