React 测试节点版本配置组件 - EditableProTable 使用指南
import\ React, {\ useEffect, useRef, useState\ }\ from\ 'react';\nimport\ ContentCard\ from\ '@/components/ContentCard';\nimport\ {\ Button, Collapse, Select, Space\ }\ from\ 'antd';\nimport\ {\ ActionType, EditableProTable, ProColumns\ }\ from\ '@ant-design/pro-table';\nimport\ ProForm, {\ ProFormInstance\ }\ from\ '@ant-design/pro-form';\nimport\ {\ getOnlyKey\ }\ from\ '@/utils/utils';\nimport\ {\ PlusCircleOutlined\ }\ from\ '@ant-design/icons';\nimport\ './index.less';\nimport\ {\ isArray\ }\ from\ 'lodash';\nconst\ {\ Panel\ }\ =\ Collapse;\nconst\ DEMAND_DICT\ =\ [\n {\n label:\ 'M1-1',\n value:\ '1',\n },\n {\n label:\ 'M1-2',\n value:\ '2',\n },\n {\n label:\ 'M1-3',\n value:\ '3',\n },\n];\n\nconst\ VersionConfiguration:\ React.FC\ =\ ()\ =>\ {\n const\ actionRef\ =\ useRefdataSource${item.value}]\ =\ data.map((item)\ => ({\n key:\ getOnlyKey(),\n ...item,\n }));\n });\n\n setDataSource(initialValues);\n formRef.current?.setFieldsValue(initialValues);\n }, []);\n return (\n
dataSource${item.value}} style={{ margin: '0' }}>\n <EditableProTable\n rowKey="key"\n recordCreatorProps={false}\n actionRef={actionRef}\n columns={columns}\n editable={{\n type:\ 'single',\n editableKeys: editKeys,\n onChange: setEditKeys,\n actionRender: (row, config, defaultDoms)\ => {\n return [defaultDoms.save, defaultDoms.cancel];\n },\n }}\n search={false}\n pagination={false}\n bordered\n dataSource={dataSource[dataSource${item.value}]}\n onChange={(data)\ => {\n setDataSource((prevDataSource)\ => ({\n ...prevDataSource,\n [dataSource${item.value}]: data,\n }));\n }}\n />\n </ProForm.Item>\n 