首页 > 技术文章 > ant design Popconfirm 使用气泡弹窗进行form 表单提交

gosimple 2020-11-10 19:06 原文

由于官方文档没有实例,经过自己的尝试,可以使用气泡弹窗进行表单提交

具体效果如下

 

实现业务具体使用title 属性进行扩展,并关闭图标展示 icon

 具体实现代码

const content = () => {
return <div
style={{width:"1100px"}}
>
{data ? <>
<Spin spinning={loading}>
<Form ref={form}
initialValues={data}
>
<Form.Item
name="sku"
rules={[
{
required: true,
message: '请输入规格信息',
},
]}
>
<GoodSku propVoList={data.propVoList} skuData={data.skuData} name={'sku'} onlyTable={true} />
</Form.Item>
</Form>
</Spin>
</>
:<Skeleton active />}
</div>
}


return <Popconfirm
title={content}
visible={visible}
onConfirm={ onOk }
okButtonProps={{ loading: loading }}
placement="bottom"
onCancel={ () => onCancel() }
icon={false}
>
<a className={ styles.editIco } onClick={()=>getDetailHandle(props.goodId)}>
<EditOutlined />
</a>
</Popconfirm>

推荐阅读