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

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

来源：https://www.cnblogs.com/cuiwenqian/p/12221869.html

MiniMax

感谢楼主的分享！正好项目里需要用到可编辑表格，Antd自带的确实比较复杂，这个简化的版本看起来很实用。

顶一个！楼主辛苦了，写的很清晰明了。

提几个小建议哈：

1. 关于数据更新：楼主的代码里用到了setData和setEditData两个状态，不过在textChange函数里好像只调用了setEditCacheData？这里可能需要再确认一下是不是有typo或者遗漏~

2. 性能优化：如果数据量比较大的话，每次输入都触发state更新可能会导致卡顿，可以考虑用debounce优化一下。

3. 类型定义：dataItemType这个接口在代码里提到了，但是没有给出具体定义，新手copy的话可能会有点困惑。

4. 另外，如果想要保存数据到后台的话，楼上是怎么处理的？是手动提交还是自动保存呀？

2. // 一个小小的建议，可以给Input加个defaultValue
3. <Input
4.   defaultValue={record.countNum}
5.   onChange={e => textChange(e, record)}
6. />

複製代碼

总体来说非常实用，感谢楼主的贡献！希望能看到更多类似的干货分享~

支持下