antd React 实现可编辑表格(v2)

这里是第二个版本的 

代码如下:

import React from 'react';
import { Form, Table, Input, Space, Button, InputNumber } from 'antd';
import styler from './index.less';
export default function EditTable(props) {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <div className={styler.edit_table}>
      <Form
        form={form}
        initialValues={{ table: [{ name: 'lily' }, { name: 'lisa' }] }}
        onFinish={onFinish}
      >
        <Form.Item label colon={false}>
          <Form.List name="table">
            {(fields, { add, remove }) => {
              const rules = [{ required: true, message: '请填充内容!' }];
              return (
                <div>
                  <Table
                    dataSource={fields}
                    columns={[
                      {
                        title: 'name',
                        dataIndex: 'name',
                        key: 'name',
                        render: (_, record) => {
                          return (
                            <Form.Item
                              rules={rules}
                              name={[record.name, 'name']}
                              fieldKey={[record.fieldKey, 'name']}
                            >
                              <Input placeholder="place input name" />
                            </Form.Item>
                          );
                        },
                      },
                      {
                        title: 'age',
                        dataIndex: 'age',
                        key: 'age',
                        render: (_, record) => {
                          return (
                            <Form.Item
                              rules={rules}
                              name={[record.name, 'age']}
                              fieldKey={[record.fieldKey, 'age']}
                            >
                              <Input placeholder="place input age" />
                            </Form.Item>
                          );
                        },
                      },
                      {
                        title: 'address',
                        dataIndex: 'address',
                        key: 'address',
                        render: (_, record, index) => {
                          return (
                            <Form.Item shouldUpdate noStyle>
                              {({ getFieldValue }) =>
                                getFieldValue(['table', index, 'name']) ===
                                'yh' ? (
                                  <Form.Item
                                    rules={rules}
                                    name={[record.name, 'address']}
                                    fieldKey={[record.fieldKey, 'address']}
                                  >
                                    <Input placeholder="pleace input address" />
                                  </Form.Item>
                                ) : (
                                  <Form.Item
                                    rules={rules}
                                    name={[record.name, 'address']}
                                    fieldKey={[record.fieldKey, 'address']}
                                  >
                                    <InputNumber />
                                  </Form.Item>
                                )
                              }
                            </Form.Item>
                          );
                        },
                      },
                      {
                        title: '操作',
                        dataIndex: 'action',
                        key: 'action',
                        render: (text, record) => {
                          return (
                            <Space>
                              <i
                                type="text"
                                onClick={() => add()}
                                className="iconfont iconaddData"
                              />
                              <i
                                type="text"
                                onClick={() => remove(record.name)}
                                className="iconfont icondelete"
                              />
                            </Space>
                          );
                        },
                      },
                    ]}
                  />
                </div>
              );
            }}
          </Form.List>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

.edit_table {
  :global {
    .ant-row .ant-form-item {
      margin-bottom: 0px !important;
    }
  }
}