电子商务网站建设素材,国际新闻最新消息今天军事,wordpress倒计时采集,新网免费空间与编辑表格外的内容联动
value 同 dataSource#xff0c;传入一个数组,是 table 渲染的元数据 T[] undefined
onChange dataSource 修改时触发#xff0c;删除和修改都会触发,如果设置了 value#xff0c;Table 会成为一个受控组件。 (value:T[])void undefined
recordC…与编辑表格外的内容联动
value 同 dataSource传入一个数组,是 table 渲染的元数据 T[] undefined
onChange dataSource 修改时触发删除和修改都会触发,如果设置了 valueTable 会成为一个受控组件。 (value:T[])void undefined
recordCreatorProps 新建一行数据的相关配置 RecordCreatorProps ButtonProps -
maxLength 最大的行数到达最大行数新建按钮会自动消失 number -
editable 可编辑表格的相关配置 TableRowEditable -
controlled 是否受控, 如果受控每次编辑都会触发 onChange并且会修改 dataSource boolean false
editableFormRef table 所有的 form带了一些表格特有的操作 React.RefEditableFormInstanceT undefinedimport 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] useStateReact.Key[](() []);const formRef useRefProFormInstanceany();const actionRef useRefActionType();const editableFormRef useRefEditableFormInstance();const columns: ProColumnsDataSourceType[] [{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) [akeydeleteonClick{() {const tableDataSource formRef.current?.getFieldValue(table,) as DataSourceType[];formRef.current?.setFieldsValue({table: tableDataSource.filter((item) item.id ! row?.id),});}}移除/a,akeyeditonClick{() {actionRef.current?.startEditable(row.id);}}编辑/a,],},];return (ProCarddivstyle{{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}/divdiv style{{ flex: 1 }}题数{info.questions}/divdiv style{{ flex: 2 }}ProFormDigit label及格分 //divdiv style{{ flex: 2 }}ProFormDigit label考试时间(分钟) //div/div);}}/ProFormDependencyEditableProTableDataSourceTyperowKeyidscroll{{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}nametablecolumns{columns}recordCreatorProps{{record: (index) {return { id: index 1 };},}}editable{{type: multiple,editableKeys,onChange: setEditableRowKeys,}}//ProForm/div/ProCard);
};
