首页 > 其他分享 >Antd4X Form.List嵌入Table 表格项数据联动

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

时间:2024-09-29 14:51:02浏览次数:13  
标签:Form form 数据源 List 表单 Antd4X 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
});

 

标签:Form,form,数据源,List,表单,Antd4X,Table
From: https://www.cnblogs.com/karle/p/18439812

相关文章

  • 图表示学习中的Transformer:Graphormer的突破
    人工智能咨询培训老师叶梓转载标明出处在自然语言处理和计算机视觉等领域,Transformer架构已经成为主导选择。然而,在图级别的预测任务中,它的表现并不如主流的图神经网络(GNN)变体。这一现象引发了一个思考:Transformer是否适合图表示学习,以及如何使其在图表示学习中发挥作用。来......
  • [机器视觉][轻量化网络]GhostFormer: Efficiently amalgamated CNNtransformer archit
    目的与成果:     本文旨在提出一个轻量化的模型,在减少模型参数量的同时,保持一定的精度,  实验表明,该模型在PascalVOC数据集上的计算成本不到YOLOv7的一半,仅损失约3%mAP@0.5,在MSCOCO数据集上的损失为9.7%mAP@0.5,与GhostNet相比提高了0.95。本文的主要思想: ......
  • List体系
            查阅API,看List的介绍。有序的collection(也称为序列)。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元素。与set不同,该列表通常允许重复的元素。        看完API,我......