ProComponents: ProForm嵌套ProTable提交表单时候怎样获取table的数据?

ProForm获取ProTable数据

需求是表单提交时候要把table数据也提交过去

emmm正确的用法我也不知道,比较菜,捣鼓了好久
发挥作用的是trigger="onDataSourceChange",onDataSourceChange是内置属性,看文档没发现该属性,因为编辑器有提示试试才发现这属性可行的。

主要代码

 <ProForm
      layout="horizontal"
      form={curForm}
      onFinish={async (values) => {
        // values 等同于  await curForm.validateFields()
        console.log('values:', values);
       }}
  >
 <Form.Item name="DS" trigger="onDataSourceChange">
	<ProTable/>
</Form.Item>
</ProForm>        
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
可以通过以下步骤实现: 1. 在 ProForm 表单中添加日期选择器,并设置 onChange 监听器: ```tsx // import 相关组件和类型 import { ProFormDatePicker } from '@ant-design/pro-form'; import { Moment } from 'moment'; interface FormProps { onChange: (date: Moment) => void; } const MyForm: React.FC<FormProps> = ({ onChange }) => { return ( <ProForm> <ProFormDatePicker name="date" label="选择日期" onChange={(date) => { onChange(date); }} /> </ProForm> ); }; ``` 2. 在 ProTable 中使用函数组件,并监听日期的变化,查询对应的数据: ```tsx // import 相关组件和类型 import { ProTable, ProColumns } from '@ant-design/pro-table'; import { Moment } from 'moment'; interface TableProps { date: Moment | null; } const MyTable: React.FC<TableProps> = ({ date }) => { const fetchData = async () => { // 根据日期查询对应的数据并返回 const data = await queryData(date); return data; }; const columns: ProColumns<DataType>[] = [ // 列定义 ]; return ( <ProTable<DataType> columns={columns} request={fetchData} /> ); }; ``` 3. 将表单组件和表格组件组合在一起: ```tsx const MyPage: React.FC = () => { const [date, setDate] = useState<Moment | null>(null); const handleFormChange = (date: Moment) => { setDate(date); }; return ( <> <MyForm onChange={handleFormChange} /> <MyTable date={date} /> </> ); }; ``` 这样,当用户选择日期后,会自动查询对应的数据并在表格中展示。需要注意的是,`queryData` 函数需要根据具体需求自行实现。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值