antd常用组件 select,form等

参考代码为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="&nbsp;">
              <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();