与编辑表格外的内容联动
value	同 dataSource，传入一个数组,是 table 渲染的元数据	T[]	undefined
onChange	dataSource 修改时触发，删除和修改都会触发,如果设置了 value，Table 会成为一个受控组件。	(value:T[])=>void	undefined
recordCreatorProps	新建一行数据的相关配置	RecordCreatorProps & ButtonProps	-
maxLength	最大的行数，到达最大行数新建按钮会自动消失	number	-
editable	可编辑表格的相关配置	TableRowEditable	-
controlled	是否受控, 如果受控每次编辑都会触发 onChange，并且会修改 dataSource	boolean	false
editableFormRef	table 所有的 form，带了一些表格特有的操作	React.Ref<EditableFormInstance<T>>	undefined

import type {ActionType,EditableFormInstance,ProColumns,ProFormInstance,
} from '@ant-design/pro-components';
import {EditableProTable,ProCard,ProForm,ProFormDependency,ProFormDigit,
} from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';type DataSourceType = {id: React.Key;associate?: string;questionsNum?: number;type?: string;fraction?: number;scoringMethod?: string;
};const defaultData: DataSourceType[] = [{id: 624748504,associate: '题库名称一',questionsNum: 10,type: 'multiple',scoringMethod: 'continuous',fraction: 20,},{id: 624691229,associate: '题库名称二',questionsNum: 10,scoringMethod: 'continuous',type: 'radio',fraction: 20,},{id: 624748503,associate: '题库名称三',questionsNum: 10,type: 'judge',scoringMethod: 'continuous',fraction: 20,},{id: 624691220,associate: '题库名称四',questionsNum: 10,scoringMethod: 'continuous',type: 'vacant',fraction: 20,},
];export default () => {const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => []);const formRef = useRef<ProFormInstance<any>>();const actionRef = useRef<ActionType>();const editableFormRef = useRef<EditableFormInstance>();const columns: ProColumns<DataSourceType>[] = [{title: '关联题库',dataIndex: 'associate',valueType: 'text',ellipsis: true,},{title: '题型',key: 'type',dataIndex: 'type',valueType: 'select',valueEnum: {multiple: { text: '多选题', status: 'Default' },radio: { text: '单选题', status: 'Warning' },vacant: {text: '填空题',status: 'Error',},judge: {text: '判断题',status: 'Success',},},},{title: '题数',dataIndex: 'questionsNum',valueType: 'digit',},{title: '计分方式',dataIndex: 'scoringMethod',valueType: 'select',request: async () => [{value: 'discrete',label: '离散型',},{value: 'continuous',label: '连续型',},],fieldProps: (_, { rowIndex }) => {return {onSelect: () => {// 每次选中重置参数editableFormRef.current?.setRowData?.(rowIndex, { fraction: [] });},};},},{title: '分值',width: 150,dataIndex: 'fraction',valueType: (record) => {const scoringMethod = record?.scoringMethod;if (scoringMethod === 'discrete') return 'select';return 'digit';},fieldProps: {mode: 'multiple',},request: async () =>['A', 'B', 'D', 'E', 'F'].map((item, index) => ({label: item,value: index,})),},{title: '操作',valueType: 'option',render: (_, row) => [<akey="delete"onClick={() => {const tableDataSource = formRef.current?.getFieldValue('table',) as DataSourceType[];formRef.current?.setFieldsValue({table: tableDataSource.filter((item) => item.id !== row?.id),});}}>移除</a>,<akey="edit"onClick={() => {actionRef.current?.startEditable(row.id);}}>编辑</a>,],},];return (<ProCard><divstyle={{maxWidth: 800,margin: 'auto',}}><ProForm<{table: DataSourceType[];}>formRef={formRef}initialValues={{table: defaultData,}}><ProFormDependency name={['table']}>{({ table }) => {const info = (table as DataSourceType[]).reduce((pre, item) => {return {totalScore:pre.totalScore +parseInt((item?.fraction || 0).toString(), 10),questions:pre.questions +parseInt((item?.questionsNum || 0).toString(), 10),};},{ totalScore: 0, questions: 0 },);return (<divstyle={{display: 'flex',alignItems: 'center',gap: 16,paddingBlockEnd: 16,}}><div style={{ flex: 1 }}>总分：{info.totalScore}</div><div style={{ flex: 1 }}>题数：{info.questions}</div><div style={{ flex: 2 }}><ProFormDigit label="及格分" /></div><div style={{ flex: 2 }}><ProFormDigit label="考试时间(分钟)" /></div></div>);}}</ProFormDependency><EditableProTable<DataSourceType>rowKey="id"scroll={{x: true,}}editableFormRef={editableFormRef}controlledactionRef={actionRef}formItemProps={{label: '题库编辑',rules: [{validator: async (_, value) => {if (value.length < 1) {throw new Error('请至少添加一个题库');}if (value.length > 5) {throw new Error('最多可以设置五个题库');}},},],}}maxLength={10}name="table"columns={columns}recordCreatorProps={{record: (index) => {return { id: index + 1 };},}}editable={{type: 'multiple',editableKeys,onChange: setEditableRowKeys,}}/></ProForm></div></ProCard>);
};