antd中使用FormList
站长
· 阅读数 29
在antd的Form中使用FormList
介绍
为字段提供数组化管理。
Form.List 渲染表单相关操作函数
本次案例中只使用了新增与删除
新增表单项：add
移动表单项：move
删除表单项：remove
案例一 单个Form.List
Form.List的基本使用
使用Ant Design的Form组件
Form.List 组件包装了一个动态的 fields 数组，每个数组项代表一个输入项
通过 add 和 remove 方法，用户可以动态地添加或删除输入项。
在 Form.List 中，每个 Form.Item 都可以通过 dependencies 属性指定一个依赖的字段或字段列表。当依赖的字段值变化时，这些字段的显示状态也会随之变化。
<Form.Item label="价格比对">
<div>
<div>
<Form.List
name={'noProductGroupPriceList'}
>
{(
fieldsData,
{
add: addList,
remove: removeList,
},
) => (
<>
{fieldsData.map(
({
key: subKey,
name: subName,
}: any) => (
<div key={subKey}>
<div className="strategy-flex mb10">
<div className="text">
{subKey == 0
? '当价格'
: '或，当价格'}
</div>
<Form.Item
noStyle
name={[
subName,
'comType',
]}
>
<Select
className="w150"
placeholder="请选择"
options={
comTypeOptions
}
/>
</Form.Item>
<Form.Item
noStyle
name={[
subName,
'priceType',
]}
>
<Select
placeholder="请选择"
options={[
{
value: '5',
label:
'门店线下零售价',
},
{
value: '6',
label:
'门店线下成本价',
},
]}
className="w150 ml10"
/>
</Form.Item>
<div className="text1">
*1（+
</div>
<Form.Item
noStyle
name={[
subName,
'pricePercentValue',
]}
>
<Input
className="w150"
placeholder="毛利率"
/>
</Form.Item>
<div className="text">
%)+固定金额
</div>
<Form.Item
noStyle
name={[
subName,
'priceFixedValue',
]}
>
<Input
className="w150"
placeholder="请输入"
/>
</Form.Item>
<Button onClick={addList}>
+
</Button>
{subKey !== 0 && (
<Button
onClick={() =>
removeList(subName)
}
>
-
</Button>
)}
</div>
</div>
),
)}
</>
)}
</Form.List>
</div>
<div>
<div className="strategy-flex mb10 mt10">
<Form.Item
name="noProductGroupActPriceExpNoSpecialOffer"
noStyle
>
<Checkbox.Group>
<Checkbox
className="w250"
value="1"
>
特价不满足时，修改平台特价为:
</Checkbox>
</Checkbox.Group>
</Form.Item>
<Form.Item
noStyle
dependencies={[
'noProductGroupActPriceExpNoSpecialOffer',
]}
>
{(form) => {
const noProductGroupActPriceExpNoSpecialOffer =
form.getFieldValue(
'noProductGroupActPriceExpNoSpecialOffer',
);
if (
noProductGroupActPriceExpNoSpecialOffer?.includes(
'1',
)
) {
return (
<div className="strategy-flex">
<Form.Item
noStyle
name="noProductGrouPactPriceExpPriceType"
>
<Select
className="w150"
options={[
{
label:
'门店线下零售价',
value: '5',
},
{
label:
'门店线下成本价',
value: '6',
},
]}
placeholder="请选择"
/>
</Form.Item>
<div className="text1">
*1（+
</div>
<Form.Item
noStyle
name="noProductGroupPactPriceExpPricePercentValue"
>
<Input
className="w150"
placeholder="请输入"
/>
</Form.Item>
<div className="text">
%)+固定金额
</div>
<Form.Item
noStyle
name="noProductGroupPactPriceExpPriceFixedValue"
>
<Input
className="w150 ml10"
placeholder="请输入"
/>
</Form.Item>
<Form.Item
noStyle
name="noProductGroupPactPriceExpExecTime"
>
<Select
className="w150 ml10"
placeholder="请选择"
options={timeOptions}
/>
</Form.Item>
<div className="text">
执行
</div>
</div>
);
}
return '';
}}
</Form.Item>
</div>
<div className="strategy-flex mb10 mt10">
<Form.Item
name="noProductGroupNoOriginalPrice"
noStyle
>
<Checkbox.Group>
<Checkbox
className="w250"
value="1"
>
原价不满足时，修改平台原价为:
</Checkbox>
</Checkbox.Group>
</Form.Item>
<Form.Item
noStyle
dependencies={[
'noProductGroupNoOriginalPrice',
]}
>
{(form) => {
const noProductGroupNoOriginalPrice =
form.getFieldValue(
'noProductGroupNoOriginalPrice',
);
if (
noProductGroupNoOriginalPrice?.includes(
'1',
)
) {
return (
<div className="strategy-flex">
<Form.Item
noStyle
name="noProductGroupNoOriginalPricePriceType"
>
<Select
className="w150"
options={[
{
label:
'门店线下零售价',
value: '5',
},
{
label:
'门店线下成本价',
value: '6',
},
]}
placeholder="请选择"
/>
</Form.Item>
<div className="text1">
*1（+
</div>
<Form.Item
noStyle
name="noProductGroupNoOriginalPricePricePercentValue"
>
<Input
className="w150"
placeholder="请输入"
/>
</Form.Item>
<div className="text">
%)+固定金额
</div>
<Form.Item
noStyle
name="noProductGroupNoOriginalPricePricePriceFixedValue"
>
<Input
className="w150 ml10"
placeholder="请输入"
/>
</Form.Item>
<Form.Item
noStyle
name="noProductGroupNoOriginalPriceExecTime"
>
<Select
className="w150 ml10"
placeholder="请选择"
options={timeOptions}
/>
</Form.Item>
<div>执行</div>
</div>
);
}
return '';
}}
</Form.Item>
</div>
</div>
</div>
</Form.Item>
案例一 Form.List嵌套Form.List
使用案例和上面案例一大致相同
第一层FormList的name为name=“users”
第二层FormList的name为name={[name, 'listData']}
使用shouldUpdate监听数据变化：
const noSpecialOffer = getFieldValue([ 'users', name, 'noSpecialOffer', ]);
数据结构如下：
users: [
{
key: 0,
listData: [{ id: 1 }], // 默认一条数据
},
],
<>
<Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(
({ key, name, ...restField }, index) => (
<div key={key} className="priceBox mb10">
<div className="priceBoxColor">
<div className="closeBox">
<div>商品组价格管控规则</div>
{key !== 0 && (
<div onClick={() => remove(name)}>
X
</div>
)}
</div>
<div>
<p>
注：在玖宫格操作时需要满足价格监管，不满足时根据配置执行内容。
</p>
<p>
定时拉取平台（美团医药类店铺、饿了么）的折扣价和原价比对，美团不满足即可修正，饿了么提供不满足清单
</p>
</div>
</div>
<Row>
<Col span={6}>
<Form.Item
{...restField}
labelCol={{ offset: 2 }}
name={[name, 'controlName']}
label="管控名称"
{...requiredDecorator}
>
<Input placeholder="请输入价格管控名称" />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
{...restField}
labelCol={{ offset: 2 }}
name={[name, 'controlType']}
label="管控类型"
{...requiredDecorator}
>
<Select
options={[
{ label: '社保品', value: '1' },
{ label: '毛利管控', value: '2' },
{
label: '其他要求管控',
value: '3',
},
]}
placeholder="请选择"
className="w150"
/>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
{...restField}
labelCol={{ offset: 2 }}
name={[name, 'index']}
label="优先级"
>
<Input placeholder="数字越高优先级越高" />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={6}>
<Form.Item
label="商品组"
{...restField}
labelCol={{ offset: 2 }}
name={[name, 'goodsGroupIds']}
{...requiredDecorator}
>
<NewProductGroupChooseInput
mulitip={true}
/>
{/* <ProductGroupChooseInput
cRef={ProductGroupChooseInputRef}
// onChange={handleStore}
/> */}
</Form.Item>
</Col>
<Col span={6}>
<div className="strategy-flex mb10">
<Form.Item
noStyle
labelCol={{ offset: 2 }}
{...restField}
name={[name, 'isActive']}
>
<Checkbox.Group>
<Checkbox
value="1"
className="w150"
>
指定标签
</Checkbox>
</Checkbox.Group>
</Form.Item>
<Form.Item shouldUpdate noStyle>
{({ getFieldValue }) => {
const isActive = getFieldValue([
'users',
name,
'isActive',
]);
const goodsGroupIds =
getFieldValue([
'users',
name,
'goodsGroupIds',
])?.id;
if (isActive?.includes('1')) {
return (
<Form.Item
noStyle
name={[
name,
'goodsLabelIds',
]}
>
<ProductLabelsChooseInput
// cRef={ProductLabelsChooseInputRef}
searchData={{
goodsGroupId:
goodsGroupIds,
serviceId:
'1102553094426030080',
}}
mulitip
/>
</Form.Item>
);
}
return '';
}}
</Form.Item>
</div>
</Col>
</Row>
<Form.Item label="价格比对">
<div>
<Form.List name={[name, 'listData']}>
{(
fieldsData,
{
add: addList,
remove: removeList,
},
) => (
<>
{fieldsData.map(
({
key: subKey,
name: subName,
}: any) => (
<div key={subKey}>
<div className="strategy-flex mb10">
<div className="text">
{subKey == 0
? '当价格'
: '或，当价格'}
</div>
<Form.Item
noStyle
name={[
subName,
'comType',
]}
{...requiredDecorator}
>
<Select
className="w150"
placeholder="请选择"
options={
comTypeOptions
}
/>
</Form.Item>
<Form.Item
noStyle
name={[
subName,
'priceType',
]}
{...requiredDecorator}
>
<Select
placeholder="请选择"
options={
priceTypeOptions
}
className="w150 ml10"
/>
</Form.Item>
<div className="text1">
*1（+
</div>
<Form.Item
noStyle
name={[
subName,
'pricePercentValue',
]}
{...requiredDecorator}
>
<Input
className="w150"
placeholder="毛利率"
/>
</Form.Item>
<div className="text">
%)+固定金额
</div>
<Form.Item
noStyle
name={[
subName,
'priceFixedValue',
]}
{...requiredDecorator}
>
<Input
className="w150"
placeholder="请输入"
/>
</Form.Item>
<Button onClick={addList}>
+
</Button>
{subKey !== 0 && (
<Button
onClick={() =>
removeList(subName)
}
>
-
</Button>
)}
</div>
{/* <div></div> */}
{/* <Form.Item
noStyle
name={[subName,'val']}
>
<Input placeholder='请输入'/>
</Form.Item>
{subKey} */}
</div>
),
)}
{fieldsData?.length == 0 && (
<Button onClick={addList}>
+
</Button>
)}
</>
)}
</Form.List>
</div>
</Form.Item>
<div className="strategy-flex mb10">
<Form.Item
{...restField}
name={[name, 'noSpecialOffer']}
noStyle
>
<Checkbox.Group>
<Checkbox className="w250" value="1">
特价不满足时，修改平台特价为:
</Checkbox>
</Checkbox.Group>
</Form.Item>
<Form.Item shouldUpdate noStyle>
{({ getFieldValue }) => {
const noSpecialOffer = getFieldValue([
'users',
name,
'noSpecialOffer',
]);
if (noSpecialOffer?.includes('1')) {
return (
<div className="strategy-flex">
<Form.Item
noStyle
{...restField}
name={[
name,
'noSpecialOfferPriceType',
]}
>
<Select
className="w150"
options={priceTypeOptions}
placeholder="请选择"
/>
</Form.Item>
<div className="text1">
*1（+
</div>
<Form.Item
noStyle
name={[
name,
'noSpecialOfferPricePercentValue',
]}
>
<Input
className="w150"
placeholder="请输入"
/>
</Form.Item>
<div className="text">
%)+固定金额
</div>
<Form.Item
noStyle
name={[
name,
'noSpecialOfferPriceFixedValue',
]}
>
<Input
className="w150 ml10"
placeholder="请输入"
/>
</Form.Item>
<Form.Item
noStyle
name={[
name,
'noSpecialOfferPriceExecTime',
]}
>
<Select
className="w150 ml10"
placeholder="请选择"
options={timeOptions}
/>
</Form.Item>
<div>执行</div>
</div>
);
}
return '';
}}
</Form.Item>
</div>
<div className="strategy-flex mb10">
<Form.Item
{...restField}
name={[name, 'noOriginalPrice']}
noStyle
>
<Checkbox.Group>
<Checkbox className="w250" value="1">
原价不满足时，修改平台原价为:
</Checkbox>
</Checkbox.Group>
</Form.Item>
<Form.Item shouldUpdate noStyle>
{({ getFieldValue }) => {
const noOriginalPrice = getFieldValue(
['users', name, 'noOriginalPrice'],
);
if (noOriginalPrice?.includes('1')) {
return (
<div className="strategy-flex">
<Form.Item
noStyle
{...restField}
name={[
name,
'noOriginalPricePriceType',
]}
>
<Select
className="w150"
options={priceTypeOptions}
placeholder="请选择"
/>
</Form.Item>
<div className="text1">
*1（+
</div>
<Form.Item
noStyle
name={[
name,
'noOriginalPricePricePercentValue',
]}
>
<Input
className="w150"
placeholder="请输入"
/>
</Form.Item>
<div className="text">
%)+固定金额
</div>
<Form.Item
noStyle
name={[
name,
'noOriginalPricePricePriceFixedValue',
]}
>
<Input
className="w150 ml10"
placeholder="请输入"
/>
</Form.Item>
<Form.Item
noStyle
name={[
name,
'noOriginalPricePriceExecTime',
]}
>
<Select
className="w150 ml10"
placeholder="请选择"
options={timeOptions}
/>
</Form.Item>
<div>执行</div>
</div>
);
}
return '';
}}
</Form.Item>
</div>
</div>
),
)}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
block
>
添加管控
</Button>
</Form.Item>
</>
)}
</Form.List>
</>
设置默认值
<Form
initialValues={initialValues}
form={form}
style={{ minWidth: '1400px' }}
{...layout}
>
。。。。。。
</Form>
const initialValues = {
//案例二 默认值
users: [
{
key: 0,
listData: [{ id: 1 }], // 默认一条数据
},
],
//案例一 默认值
noProductGroupPriceList: [
{
key: 0,
},
],
};
注意点
- 使用删除时removeList参数不要使用key,使用name
- 嵌套使用FormList时注意shouldUpdate中的监听参数
- 默认值设置的建议在Form的initialValues中设置
转载自:https://juejin.cn/post/7388891131038302217