React+Antd封装的简易的编辑表格

前言

因为项目需要，需要一个可编辑的表格，但是Antd中提供的可编辑表格实在是太繁琐，使用起来实在是太不友好了，所以自己就写了一个简易的编辑表格组件。

第一步

首先，在项目中创建一个EditTable.tsx的文件;在文件中引入需要的模块；

PS:本人使用的React Hook + TypeScript来进行开发的；

import React, { useState, useEffect } from 'react';
import { Table, Form, message, Input } from 'antd';   //需要的antd的组件
import { FormComponentProps } from 'antd/lib/form';
import { ColumnProps } from 'antd/lib/table';
import { dataItemType } from './interface';  //定义

/**
 * 定义需要的数据的类型
 */
interface EditTableProps extends FormComponentProps {
  dataSource: dataItemType[];
  loading: boolean;
}

第二步

编写组件

const EditTable: React.FC<EditTableProps> = ({loading, dataSource, form: {getFieldDecorator}}) => {  
const [editData, setEditData] = useState<dataItemType[]>();  //用来存储编辑后的数据, 用来传递给后台
const [data, setData] = useState<dataItemType>();  //用来展示编辑后的数据   

useEffect = () => {
    //将传入的数据浅拷贝一下，避免在子组件中直接修改父组件传入的 dataSource
    setData([...dataSource]);
    setEditData([...dataSource]);
,[]};

 /**
   * 列表表头数组
   */
const columns: Array<ColumnProps<dataItemType>> = [
    {
        title: '单据',
        dataIndex: 'record'
    },
    /*........*/
    {
      title: '编辑',
      dataIndex: 'edit',
      render: (text: any, record: any, index: number) => {
          return (
            <Form>
              {getFieldDecorator(`countNum[${index}]`, {
                rules: [
                  {
                    required: true,
                    message: '编辑字段不能为空',
                  },
                  
                ],
              })(
                <Input
                  onChange={e => {
                    textChange(e, record);
                  }}
                />
              )}
            </Form>
          );
    },
]

return (
    <Table columns={columns} dataSource={data} pagination={false} loading={loading} rowKey='id'  />
)
}

export default Form.create<EditTableProps>()(EditTable)

第三步

处理编辑的数据

const textChange = (e: any, record: any) => {
    let rows = [...data];
    let row = rows.find(item => item.id === record.id);
    if (row) {
       row.countNum = e.target.value;
    }
    //保存编辑后的数据
    setEditCacheData(rows);
  };

到此，一个简单的编辑表格组件就已经封装好了，可能还有更好的实现方法，但是当时由于项目事件紧张，只能想出这种实现方法，各位大佬不喜勿喷；