解决Antd Mobile InputItem标题过长不能显示完全的问题

代码结构:一个List里面包个InputItem

效果:

解决方法:

.create-wrap {
    .am-list-item, .am-input-item, .am-list-item-middle {
        height: auto !important;
    }
    .am-input-label {
        word-wrap: wrap !important;
        word-break: break-all !important;
        white-space: normal !important;
    }
    .am-input-control {
        min-width: 90px !important;
    }
}

其中,.create-wrap是外层容器一个div的class

改进效果:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design 中,一个表单(Form)只能有一个包含所有表单项的 Form.Item,因此无法直接嵌套多个 Form。但是,可以通过使用表单域组(Form.List)来实现套嵌表单。 具体实现步骤如下: 1. 在外层表单(父表单)中使用 Form.List 包裹需要嵌套的表单项,例如: ```jsx <Form.List name="nestedForm"> {(fields, { add, remove }) => { return ( <> {fields.map((field, index) => ( <Form.Item key={field.key}> <Input name={[field.name, 'inputName']} fieldKey={[field.fieldKey, 'inputKey']} placeholder="Input something" /> <Button onClick={() => remove(field.name)}>Remove</Button> </Form.Item> ))} <Button onClick={() => add()}>Add</Button> </> ); }} </Form.List> ``` 2. 在嵌套的表单项(子表单)中使用 Field 包裹需要收集数据的表单项,例如: ```jsx <Form.List name={['nestedForm', index, 'subNestedForm']}> {(fields, { add, remove }) => { return ( <> {fields.map((field, index) => ( <Form.Item key={field.key}> <Input name={[field.name, 'inputName']} fieldKey={[field.fieldKey, 'inputKey']} placeholder="Input something" /> <Button onClick={() => remove(field.name)}>Remove</Button> </Form.Item> ))} <Button onClick={() => add()}>Add</Button> </> ); }} </Form.List> ``` 在上述代码中,`name` 属性设置为数组形式,使用 `[]` 包裹每级表单项的名称,例如 `'nestedForm'` 表示父表单中的嵌套表单,`'subNestedForm'` 表示子表单中的嵌套表单。使用 `index` 变量表示当前表单项的下标。 通过以上方式,就可以在 Ant Design 中实现表单的嵌套和收集数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值