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);
  };

到此，一個簡單的編輯表格組件就已經封裝好了，可能還有更好的實現方法，但是當時由於項目事件緊張，只能想出這種實現方法，各位大佬不喜勿噴；