方法一:
首先,在表单中嵌套 Form.Item
是很常见的自定义表单,如下图,嵌套的最外层 Form.Item, 一般只有 label
属性, name
属性不会起效,也意味着外层的 rule
的 required 不会起效,但我们的小红星只能表现在最外层,内层的 noStyle
属性会使其不被渲染
常见的 Form.Item 嵌套结构如下:
// 数据
const judgeData = [
{
value: 1,
label: '大于',
},
{
value: 0,
label: '等于',
},
{
value: -1,
label: '小于',
},
];
// 结构
<Form.Item label="范围" className="nesting-form-item">
<Form.Item
name="aaa"
rules={[{ required: true, message: '请输入aaa!' }]}
noStyle
>
<Select
placeholder="请选择"
onChange={() => {}}
allowClear
options={judgeData}
style={{ width: '30%', marginRight: '5px' }}
></Select>
</Form.Item>
<Form.Item
name="bbb"
rules={[{ required: true, message: '请输入bbb!' }]}
noStyle
>
<InputNumber style={{ width: '50%', marginRight: '5px' }} />
</Form.Item>
<span> 次</span>
</Form.Item>
效果如下:
解决:在最外层的 Form.Item 加一个类,自己添加 *
号,这里添加的类是 nesting-form-item
,定义如下:
.nesting-form-item {
.ant-form-item-label > {
::before {
display: inline-block;
margin-right: 4px;
color: #ff4d4f;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
}
}
}
解决的思想:就是自己根据 antd 的样式层级,自己添加带 *
的 before
元素
方法二:
- 就是自己在标签里面添加 *
- 但是, 和上面的仔细对比,你会发现,他们的样式并不相同,因为电脑的 * 和上面的content的 * 有点区别,如果有样式强迫症,那就二选一,第二种整体代码会多点。