Antd4X Form.List嵌入Table 表格项数据联动

antd 4X版本

父组件是Form组件,其中一项为Form.List,Form.List内嵌了一个Table

const form = Form.useForm()
<Form form={form}>
  <Form.List>
    {(fields, operate, { errors }) => {
      return (
        <Table
          className="wf-subform"
          size="small"
          columns={columns}
          dataSource={fields}
          pagination={false}
        />
      );
    }}
  </Form.List>
</Form>

 

Table中又两个输入框<DatePicker.RangePicker />和<Input />, 我需要选择日期范围后自动显示天数,或者输入天数后自动算出结束时间

但是根据Form.List组件,Table的数据源通过fields获取,但是fields是表单数据源,非符合Columns格式的数据源,如果直接改变dataSource来更新Table则无法实现

 

可以利用form表单变量,对整个表单数据进行整体改变。在onChange回调中,利用form.setFieldsValue(),直接对表单数据对象中的目标字段进行数据改变

//dates为DatePicker收集数据
//days为Input收集数据
const [start, end] = dates;
const diffInDays = end.diff(start, 'days') + 1;
form.setFieldsValue({
  days: diffInDays
});

 

posted @ 2024-09-29 14:53  Karle  阅读(42)  评论(0编辑  收藏  举报