Antd 中的dependencies字段使用

496 阅读1分钟

Form.Item的name为字符串时的dependencies

dependencies={['year_average']}

        <Row>
          <Col span={24}>
            <Form.Item
              label='月社平工资'
              name='month_average'
              className='label__required'
              dependencies={['year_average']}
              rules={[
                {
                  validator: (_, value) =>
                    validateRule(
                      value,
                      '请输入月社平工资',
                      value,
                      year_average,
                      '年社平工资需大于月社平工资'
                    )
                }
              ]}
            >
              <InputNumber
                controls={false}
                placeholder='请输入月社平工资'
                addonAfter='元'
                style={{ width: '100%' }}
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label='年社平工资'
              name='year_average'
              className='label__required'
              rules={[
                {
                  validator: (_, value) => validateRule(value, '请输入年社平工资')
                }
              ]}
            >
              <InputNumber
                controls={false}
                placeholder='请输入年社平工资'
                addonAfter='元'
                style={{ width: '100%' }}
              />
            </Form.Item>
          </Col>
        </Row>

Form.Item的name为数组时的dependencies

dependencies={[['payment_amount_range', 'company_payment_range_end']]}

            <Form.Item label='范围' {...shortLayout}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item
                  name={['payment_amount_range', 'company_payment_range_start']}
                  dependencies={[['payment_amount_range', 'company_payment_range_end']]}
                  rules={[
                    {
                      required:
                        !!payment_amount_range?.company_payment_range_end ||
                        payment_amount_range?.company_payment_range_end === 0,
                      message: '请输入下限'
                    },
                    {
                      validator: (_, value) =>
                        validateMoneyRule(value, payment_amount_range?.company_payment_range_end)
                    }
                  ]}
                  style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                >
                  <InputNumber
                    controls={false}
                    placeholder='下限'
                    addonAfter='元'
                    style={{ width: '100%' }}
                  />
                </Form.Item>
                <span style={{ margin: '0 10px 24px' }}>—</span>
                <Form.Item
                  name={['payment_amount_range', 'company_payment_range_end']}
                  rules={[
                    {
                      required:
                        !!payment_amount_range?.company_payment_range_start ||
                        payment_amount_range?.company_payment_range_start === 0,
                      message: '请输入上限'
                    },
                    {
                      validator: (_, value) => validateMoneyRule(value)
                    }
                  ]}
                  style={{ display: 'inline-block', width: 'calc(50% - 15px)' }}
                >
                  <InputNumber
                    controls={false}
                    placeholder='上限'
                    addonAfter='元'
                    style={{ width: '100%' }}
                  />
                </Form.Item>
              </div>
            </Form.Item>

Form.List的dependencies

dependencies={[['users', index, 'name']]}