参考代码为typescript+react
树选择 TreeSelect
下拉选项的父子节点选中不相关
import { TreeSelect } from 'antd';
<TreeSelect
showSearch
style={{ width: '100%' }}
treeData={yyIndustryOptions} // treeNodes 数据
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} //下拉菜单的样式
allowClear //显示清除按钮
multiple
treeDefaultExpandAll
fieldNames={{ //自定义节点 label、value、children 的字段
label: 'label',
value: 'code',
children: 'values',
}}
/>
其他属性补充：
| 参数 | 说明 |
|---|---|
| defaultValue | 指定默认选中的条目 |
| disabled | 是否禁用 |
| onChange | 选中树节点时调用此函数 |
Form表单自定义校验
<Form.Item
style={{ margin: 0 }}
name={[index, 'money']}
rules={[
{
required: true,
message: `金额不能为空`,
},
() => ({
// 自定义校验
async validator(_, value) {
if (
value &&
!/(^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d(\d)?$)/.test(
value,
)
) {
return Promise.reject(new Error('最多输入两位小数的数字'));
}
// 返回结果
return Promise.resolve();
},
}),
]}
>
<Input
defaultValue={record.money}
onChange={(e) =>
changeBondData(e.target.value, index, 'money')
}
/>
</Form.Item>
Form表单提交
填写表单，动态添加表格行
import { Col,Form, Input, Row, Select, Popconfirm, Button, DatePicker, message,} from 'antd';
const { Option } = Select;
// 新增form
const [addForm] = Form.useForm();
const onAddFinish = (values: any) => {
// 处理表单数据
}
<Form layout="vertical" form={addForm} onFinish={onAddFinish}>
<Row gutter={[24, 0]}>
<Col span={6}>
<Form.Item
name="trancheGrade"
label="证券档次"
rules={[
{
required: true,
message: '证券档次不能为空',
},
]}
>
<Select onChange={(value) => {}}>
{Array.from({ length: levelValue }, (v, k) => k).map(
(item: any, index: number) => {
return (
<Option value={index + 1} key={index + 1}>
{index + 1}
</Option>
);
},
)}
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="trancheName"
label="证券名称"
rules={[
{
required: true,
message: '证券名称不能为空',
},
() => ({
// 自定义校验
async validator(_, value) {
let findIndex = bondTableData.findIndex(
(item: any) => value === item.trancheName,
);
if (value && findIndex !== -1) {
return Promise.reject(new Error('该证券名称已存在'));
}
// 返回结果
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="couponTypeCd" label="利率类型">
<Select allowClear placeholder="请选择利率类型">
{/* 利率类型下拉选项 */}
{absCouponTypeOptions.map((item: any) => {
return <Option value={item.rangeId}>{item.rangeName}</Option>;
})}
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="intRate"
label="发行利率（%）"
rules={[
() => ({
// 自定义校验
async validator(_, value) {
if (
value &&
!/(^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d(\d)?$)/.test(
value,
)
) {
// 校验失败
return Promise.reject(
new Error('最多输入两位小数的数字'),
);
}
// 返回结果
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="pymtFreq"
label="偿付频率"
rules={[
{
required: true,
message: '偿付频率不能为空',
},
]}
>
<Select allowClear>
{/* 偿付频率下拉选项 */}
{absPymtFreqOptions.map((item: any) => {
return <Option value={item.rangeId}>{item.rangeName}</Option>;
})}
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="principalPaymentType"
label="还本方式"
rules={[
{
required: true,
message: '还本方式不能为空',
},
]}
>
<Select allowClear onChange={(value) => {}}>
<Option value="过手">过手</Option>
<Option value="固定">固定</Option>
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="trancheExpcMaturity" label="预计到期日">
<DatePicker style={{ width: '100%' }} />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="trancheIssuanceAmt"
label="初始证券金额（亿元）"
rules={[
{
required: true,
message: '初始证券金额不能为空',
},
() => ({
// 自定义校验
async validator(_, value) {
if (
value &&
!/(^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d(\d)?$)/.test(
value,
)
) {
// 校验失败
return Promise.reject(
new Error('最多输入两位小数的数字'),
);
}
// 返回结果
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="term"
label="期限（年）"
rules={[
{
required: true,
message: '期限不能为空',
},
() => ({
// 自定义校验
async validator(_, value) {
if (
value &&
!/(^[1-9](\d+)?(\.\d{1,4})?$)|(^(0){1}$)|(^\d\.\d(\d)?$)/.test(
value,
)
) {
return Promise.reject(
new Error('最多输入四位小数的数字'),
);
}
// 返回结果
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="outerRating"
label="外部评级"
rules={[
{
required: true,
message: '外部评级不能为空',
},
]}
>
<Select>
{/* 下拉选项 */}
{outerRatingOptions.map((item: any) => {
return <Option value={item.id}>{item.text}</Option>;
})}
</Select>
</Form.Item>
</Col>
<Col span={6}>
<Form.Item
name="trancheCode"
label="证券代码"
rules={[
() => ({
// 自定义校验
async validator(_, value) {
let findIndex = bondTableData.findIndex(
(item: any) => value === item.trancheCode,
);
// 校验失败
if (value && findIndex !== -1) {
return Promise.reject(new Error('证券代码已存在'));
}
// 返回结果
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Form.Item name="a94" label=" ">
<Button type="primary" htmlType="submit">
添加
</Button>
</Form.Item>
</Col>
</Row>
</Form>
form表单参数api
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| colon | 配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true |
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false |
| component | 设置 Form 渲染元素，为 false 则不创建 DOM 节点 | ComponentType |false | form |
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。 | FieldData[] | - |
| form | 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建 | FormInstance | - |
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |
| labelAlign | label 标签的文本对齐方式 | left | right | right |
| labelWrap | label 标签的文本换行方式 | boolean | false |
| labelCol | label 标签布局，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12} | object | - |
| layout | 表单布局 | horizontal | vertical | inline | horizontal |
| name | 表单名称，会作为表单字段 id 前缀使用 | string | - |
| preserve | 当字段被删除时保留字段值 | boolean | true |
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置,Form.Item 无法单独配置 | boolean |optional | true |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | Options | false |
| size | 设置字段组件的尺寸（仅限 antd 组件） | small | middle | large | - |
| validateMessages | 验证提示模板 | ValidateMessages | - |
| validateTrigger | 统一设置字段触发验证的时机 | string | string[] | onChange |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同labelCol | object | - |
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) - | |
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |
校验表单成功后执行相关操作
try {
await addForm.validateFields();
} catch {
checkResult = false;
}
const fieldsValue = addForm.getFieldsValue();
![[附源码]java毕业设计基于web的硕士研究生入学考务管理](https://img-blog.csdnimg.cn/f55649ed511942d7ad1cd23ad79e9cb5.png)
