一、前言
如果我们现在有这样的一个需求，在设置列的值时要同时改变列的值该怎么做呢？
如果使用antd-procomponent的EditableProTable组件能够很方便的实现，它提供了setRowData、getRowsData的方法来获取和设置编辑表格的值：
二、使用EditableProTable实现上述需求
我们实现刚才的需求可以这些写：
1）定义editorFormRef
const editorFormRef = useRef<any>();
2）传递给EditableProTable
<EditableProTable<DataSourceType> rowKey="id" headerTitle="可编辑表格" editableFormRef={editorFormRef} ... />
3）通过renderFormItem自定义单元格
{ title: '列C', dataIndex: 'decs', renderFormItem: ({ index }: any) => <ParamValue index={index} />, },
ParamValue 组件：
const ParamValue = ({ onChange, value, reqParamType, index }: any) => { const [inputValue, setInputValue] = useState<any>(value || ''); const handleInputChange = (v: string) => { setInputValue(v); onChange(v); const data = editorFormRef.current?.getRowData(index); if (data) { const setData = { title: '123' }; editorFormRef.current?.setRowData?.(index, { title: '123' }); } }; return ( <Input placeholder="请输入值" value={inputValue} onChange={(e) => handleInputChange(e.target.value)} /> ); };
这样我们在修改列C值的同时将列A的值也做了修改了，上述的代码会将列A值改为123:
三、完整源码如下
完整代码如下：
import type { ProColumns } from '@ant-design/pro-components'; import { EditableProTable } from '@ant-design/pro-components'; import React, { useState, useRef } from 'react'; import { Input } from 'antd'; type DataSourceType = { id: React.Key; title?: string; readonly?: string; decs?: string; state?: string; created_at?: string; update_at?: string; children?: DataSourceType[]; }; const defaultData: DataSourceType[] = [ { id: 624748504, title: '活动名称一', readonly: '活动名称一', decs: '这个活动真好玩', created_at: '1590486176000', update_at: '1590486176000', }, { id: 624691229, title: '活动名称二', readonly: '活动名称二', decs: '这个活动真好玩', created_at: '1590481162000', update_at: '1590481162000', }, ]; export default () => { const editorFormRef = useRef<any>(); const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([624748504, 624691229]); const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]); const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>('bottom'); const ParamValue = ({ onChange, value, reqParamType, index }: any) => { const [inputValue, setInputValue] = useState<any>(value || ''); const handleInputChange = (v: string) => { setInputValue(v); onChange(v); const data = editorFormRef.current?.getRowData(index); if (data) { const setData = { title: '123' }; editorFormRef.current?.setRowData?.(index, { title: '123' }); } }; return ( <Input placeholder="请输入值" value={inputValue} onChange={(e) => handleInputChange(e.target.value)} /> ); }; const columns: ProColumns<DataSourceType>[] = [ { title: '列A', dataIndex: 'title', width: '15%', }, { title: '列B', dataIndex: 'readonly', readonly: true, width: '15%', }, { title: '列C', dataIndex: 'decs', renderFormItem: ({ index }: any) => <ParamValue index={index} />, }, { title: '活动时间', dataIndex: 'created_at', valueType: 'date', }, ]; return ( <> <EditableProTable<DataSourceType> rowKey="id" headerTitle="可编辑表格" editableFormRef={editorFormRef} maxLength={5} scroll={{ x: 960, }} recordCreatorProps={ position !== 'hidden' ? { position: position as 'top', record: () => ({ id: (Math.random() * 1000000).toFixed(0) }), } : false } loading={false} columns={columns} request={async () => ({ data: defaultData, total: 3, success: true, })} value={dataSource} onChange={setDataSource} editable={{ type: 'multiple', editableKeys, onChange: setEditableRowKeys, }} /> </> ); };
实现起来非常的容易简单，除此之外，EditableProTable（可编辑表格）也提供了其它非常方便的功能，例如操作栏的三大金刚， 保存，删除 和 取消，如果我们要实现复制一行，或者需求只需要的 保存和取消，不需要删除按钮就需要自定义了。大大的提高了编码效率，解决了重复性的工作。
