antd EditableProTable 如何修改校验样式

最新推荐文章于 2024-08-23 14:15:01 发布

chenxiaoyi0207

最新推荐文章于 2024-08-23 14:15:01 发布

阅读量1.7k

点赞数 4

分类专栏： react 文章标签： react.js antd

本文链接：https://blog.csdn.net/sinat_38783046/article/details/121496073

版权

react 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

组件库地址：https://procomponents.ant.design/components/editable-table

一、默认校验错误样式

1.效果图

在这里插入图片描述

2.对应代码columns中“活动名称”的配置项

{
  title: '活动名称',
  dataIndex: 'title',
  width: '30%',
  formItemProps: {
    rules: [
      {
        required: true,
        whitespace: true,
        message: '此项是必填项',
      },
      {
        message: '必须包含数字',
        pattern: /[0-9]/,
      },
      {
        max: 16,
        whitespace: true,
        message: '最长为 16 位',
      },
      {
        min: 6,
        whitespace: true,
        message: '最小为 6 位',
      }
    ]
  }
}

二、如何修改成提示语展示在控件下方？

1.效果图

在这里插入图片描述

2.修改的代码

formItemProps中增加errorType属性，值为’default’。

{
	 title: '活动名称',
	 dataIndex: 'title',
	 width: '30%',
	 formItemProps: {
	   errorType:'default',//增加了这一行
	   rules: [
	     {
	       required: true,
	       whitespace: true,
	       message: '此项是必填项',
	     },
	     {
	       message: '必须包含数字',
	       pattern: /[0-9]/,
	     },
	     {
	       max: 16,
	       whitespace: true,
	       message: '最长为 16 位',
	     },
	     {
	       min: 6,
	       whitespace: true,
	       message: '最小为 6 位',
	     }
	   ]
	 }
}