react.js 实现ant-design Table表格新增编辑复制form表单 实现批量添加

react.js 实现ant-design Table表格新增编辑复制form表单 实现批量添加

如图所示,可进行添加单行,复制插入行和删除行,下面为代码实现逻辑

react.js 实现ant-design Table表格新增编辑复制form表单 实现批量添加_第1张图片

  state = {
    dataSource: [], //table里的form表单
  };
    columns = [
    {
      title: '广告',
      dataIndex: 'adSlotType',
      width: 150,
      render: (text, record, index) => {
        return (
          <Form.Item>
            {this.props.form.getFieldDecorator(`tableDt[${index}].adSlotType`, {
              rules: [
                { required: true, message: '必填!' },
                {
                  message: '不能包含空格!',
                  pattern: /^[^\s]*$/,
                },
              ],
              initialValue: record.adSlotType,
            })(
             <Input size=“small”/>
        );
      },
    },
    {
      title: '名称',
      dataIndex: 'adSlotName',
      width: 250,
      render: (text, record, index) => {
        return (
          <Form.Item>
            {this.props.form.getFieldDecorator(`tableDt[${index}].adSlotName`, {
              rules: [
                { required: true, message: '必填!' },
                {
                  validator: (rule, value, callback) => {
                    this.validateServiceName(rule, value, callback, record);
                  },
                },
                {
                  message: '不能包含空格!',
                  pattern: /^[^\s]*$/,
                },
              ],
              initialValue: record.adSlotName,
            })(<Input size="small" />)}
          Form.Item>
        );
      },
    },
    {
      title: 'CPM',
      dataIndex: 'cpm',
      width: 100,
      render: (text, record, index) => {
        return (
          <Form.Item>
            {this.props.form.getFieldDecorator(`tableDt[${index}].cpm`, {
              initialValue: record.cpm,
            })(<InputNumber step={0.01} size="small" />)}
          Form.Item>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'success',
      width: 100,
      render: (text, record, index) => {
        return (
          <span>
             this.handleCopyData(index)}>
              复制
            a>
             this.handleCopyDelete(index)}>删除a>
          span>
        );
      },
    },
  ];
 // 复制行
  handleCopyData = index => {
    const { form } = this.props;
    const values = form.getFieldsValue();
    let newDataSource = values.tableDt;
    newDataSource.splice(index, 0, { ...newDataSource[index] });
    form.setFieldsValue({
      tableDt: newDataSource,
    });
    this.setState({
      dataSource: newDataSource,
    });
  };
 // 删除行
  handleCopyDelete = index => {
    const { form } = this.props;
    const values = form.getFieldsValue();
    let tableDt = [...values.tableDt];
    tableDt = tableDt.filter((item, idx) => idx !== index);
    this.props.form.resetFields(tableDt);
    this.setState({
      dataSource: tableDt,
    });
    form.setFieldsValue({
      tableDt,
    });
  };
  //提交表单
    handleSubmit = e => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = fieldsValue;
        Modal.confirm({
          okText: '确认',
          cancelText: '取消',
          title: '提示',
          content: '确定创建吗?',
          onCancel: () => {},
          onOk: () => {
            values.tableDt.map((item, index) => {
              values.tableDt[index] = { ...item };
            });
          },
        });
    });
  };
  render() {
    const {
      form,
    } = this.props;
    const { dataSource} = this.state;
   return (
   		//使用form表单包裹table表
        <Form onSubmit={this.handleSubmit}>
             index}
              dataSource={dataSource}
              columns={this.columns}
              scroll={{ x: 'max-content' }}
            />
          Form>
    )
  }
 
  

                            
                        
                    
                    
                    

你可能感兴趣的:(react.js,react.js,javascript)