71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import { cloneDeep, defaultsDeep, merge } from 'lodash-es';
|
|
import { TableUseOptions } from '../hooks/useTable';
|
|
import { AnTablePlugin } from '../hooks/useTablePlugin';
|
|
|
|
// declare module '@/components/AnTable/hooks/useTable' {
|
|
// interface TableUseOptions {
|
|
// todo?: string;
|
|
// }
|
|
// }
|
|
|
|
const defaults: TableUseOptions = {
|
|
tableProps: {
|
|
rowSelection: {
|
|
showCheckedAll: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
interface UseTableSelectOptions {
|
|
key?: string;
|
|
mode?: 'key' | 'row' | 'both';
|
|
}
|
|
|
|
/**
|
|
* 插件：表格多选
|
|
* @description 请配合其他插件使用
|
|
*/
|
|
export function useTableSelect({ key = 'id', mode = 'key' }: UseTableSelectOptions = {}): AnTablePlugin {
|
|
const selectedKeys = ref<(string | number)[]>([]);
|
|
const selectedRows = ref<any[]>([]);
|
|
|
|
return {
|
|
id: 'selection',
|
|
provide: {
|
|
selectedKeys,
|
|
selectedRows,
|
|
},
|
|
options(options) {
|
|
const opts: TableUseOptions = defaultsDeep({}, defaults);
|
|
|
|
if (!opts.tableProps!.rowKey) {
|
|
opts.tableProps!.rowKey = key;
|
|
}
|
|
|
|
if (mode === 'both' || mode === 'key') {
|
|
opts.tableProps!.onSelectionChange = rowkeys => {
|
|
selectedKeys.value = rowkeys;
|
|
};
|
|
}
|
|
|
|
if (mode === 'both' || mode === 'row') {
|
|
opts.tableProps!.onSelect = (rowkeys, rowkey, record) => {
|
|
const index = selectedRows.value.findIndex((i: any) => i[key] == record[key]);
|
|
if (index > -1) {
|
|
selectedRows.value.splice(index, 1);
|
|
}
|
|
};
|
|
opts.tableProps!.onSelectAll = checked => {
|
|
if (checked) {
|
|
selectedRows.value = cloneDeep([]);
|
|
} else {
|
|
selectedRows.value = [];
|
|
}
|
|
};
|
|
}
|
|
|
|
return merge(options, opts);
|
|
},
|
|
};
|
|
}
|