ant-design的描述列表description组件中给label添加自定义样式(必填样式)

修改前:

<a-descriptions-item  label="案件名称">
   {{ this.mdl.caseName }}
</a-descriptions-item>

对应效果:
在这里插入图片描述
给label添加自定义样式, 修改后:

 <a-descriptions-item >
   <template v-slot:label>
       <span>
          案件名称
          <span style="margin: 0 8px;font-size: 16px;color: #fc5531;vertical-align: -3px;line-height: 1;">	*</span>
       </span>
   </template>
</a-descriptions-item>
 

更改后的效果:
在这里插入图片描述

真不错啊! ! ! 美滋滋 !!!

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ant-design 是一个流行的React UI组件库,提供了丰富的组件来帮助开发者快速构建用户界面。在ant-design,表单验证是一个重要的功能,可以通过自定义组件来实现。 对于自定义组件,我们可以使用Form.create方法来创建一个高阶组件。在自定义组件,我们可以通过getFieldDecorator方法来包装我们的自定义组件,实现表单验证的功能。 在包装自定义组件时,我们可以使用rules参数来定义验证规则。比如,我们可以通过required:true来指定该字段为必填项,通过message参数来指定验证不通过时的错误提示信息。除此之外,我们还可以自定义其他验证规则,比如验证正则表达式、长度范围等。 在自定义组件,可以通过this.props.form.getFieldError来获取某个字段的验证错误信息,通过this.props.form.isFieldValidating来判断某个字段是否正在进行验证,通过this.props.form.validateFields来触发表单验证。 同时,我们还可以使用validateTrigger参数来指定触发表单验证的时机,默认是onChange事件。比如,我们可以将validateTrigger设置为onBlur,表示在失去焦点时进行表单验证。 总结来说,ant-design提供了一系列的API来实现表单验证功能,通过自定义组件的方式可以很方便地实现对自定义组件的验证。开发者可以根据自己的需求灵活使用这些API来完成表单验证的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值