antd-procomponent中编辑表格动态数据设置的使用

一、前言

如果我们现在有这样的一个需求，在设置列的值时要同时改变列的值该怎么做呢？

如果使用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（可编辑表格）也提供了其它非常方便的功能，例如操作栏的三大金刚， 保存，删除 和 取消，如果我们要实现复制一行，或者需求只需要的 保存和取消，不需要删除按钮就需要自定义了。大大的提高了编码效率，解决了重复性的工作。