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

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

时间:2024-09-29 14:51:02浏览次数:10  
标签: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

相关文章

  • Bad or missing usercopy whitelist? Kernel memory overwrite attempt detected to S
    Linux内核有一个usercopywhitelist机制,只允许这里面的region来做usercopy。如果是用kmem_cache_create申请的kmem_cache申请的内存空间来copytouser或者copyfromuser,那么就会报这个错。这时要用kmem_cache_create_usercopy,来将申请的区域加入到usercopywhitelist中。/***......
  • bevformer 3d目标检测 外参扰动 数据增强 试验
    因为ego发生了旋转和位移,所以车上所有传感器的外参都将变化,所以把上述中的数据增强称为外参扰动。 核心原则就是:把GT和bev的referencepoints统一到ego_new坐标系下。GT变换:把原来在ego坐标系下的GT,变换到ego_new坐标系下,即【ego_new坐标系下的坐标值】=【ego2ego_new】【e......
  • 图表示学习中的Transformer:Graphormer的突破
    人工智能咨询培训老师叶梓转载标明出处在自然语言处理和计算机视觉等领域,Transformer架构已经成为主导选择。然而,在图级别的预测任务中,它的表现并不如主流的图神经网络(GNN)变体。这一现象引发了一个思考:Transformer是否适合图表示学习,以及如何使其在图表示学习中发挥作用。来......
  • 使用C# WinForm读取MODBUS 数据
    前言因工作原因本人最近使用MODBUStcp进行数据读取,所以使用WINFORM简单写了一个读取工具。一、界面搭建创建winform界面,按照如下搭建界面二、添加modbus库等待安装完成,项目内出现名称三、添加代码双击打开按钮,进入代码界面usingEasyModbus;usingSystem;usi......
  • WPF FlowDocument List ListItem Paragraph BlockUIContainer Table TableRowGr
    <Windowx:Class="WpfApp419.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft......
  • huggingface的transformers与datatsets的安装与使用
    目录1.安装 2.分词2.1tokenizer.encode() 2.2tokenizer.encode_plus ()2.3tokenizer.batch_encode_plus() 3.添加新词或特殊字符 3.1tokenizer.add_tokens()3.2 tokenizer.add_special_tokens() 4.datasets的使用4.1加载datasets 4.2从dataset中取数据  4.3对datas......
  • transformer 从零
    transformer从零trm在做什么事情?类比“翻译”,输入、黑盒处理、输出。对其细化,黑盒中编码作为解码的输入,二者的结果作为终局输出的输入。继续细化成下图:位置编码下图为rnn下的时间线展开,借由三角函数性质公式:得到:即,若当pos=“我”,k=“爱”时,pos+k的“你”位置的向量......
  • [机器视觉][轻量化网络]GhostFormer: Efficiently amalgamated CNNtransformer archit
    目的与成果:     本文旨在提出一个轻量化的模型,在减少模型参数量的同时,保持一定的精度,  实验表明,该模型在PascalVOC数据集上的计算成本不到YOLOv7的一半,仅损失约3%[email protected],在MSCOCO数据集上的损失为9.7%[email protected],与GhostNet相比提高了0.95。本文的主要思想: ......
  • show processlist和show full processlist说明
    showprocesslist和showfullprocesslistprocesslist命令的输出结果显示了有哪些线程在运行,不仅可以查看当前所有的连接数,还可以查看当前的连接状态帮助识别出有问题的查询语句等。如果是root帐号,能看到所有用户的当前连接。如果是其他普通帐号,则只能看到自己占用的连接。showp......
  • List体系
            查阅API,看List的介绍。有序的collection(也称为序列)。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元素。与set不同,该列表通常允许重复的元素。        看完API,我......