Ant Design组件使用合集（不断更新）

一、Table组件的使用

1、Table组件中onCell的使用

需求1：描述内容过长时将超出部分隐藏并显示省略号，鼠标悬停查看全部信息

{
    title: '数据描述',
    dataIndex: 'desc',
    onCell: () => {
      return { //：注意用return
        style: {//注意：设置行内样式style
          maxWidth: 50,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow:'ellipsis',
          cursor:'pointer'
        }
      }
    },
    render: (text) =>{
      return<React.Fragment>
         <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
      </React.Fragment>
    }
  },

需求2：修改奇偶行的背景颜色

{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    onCell: ((record, rowIndex)=>{ // 传入两个形参，分别为该行对应的内容r与行索引
        if(rowIndex % 2 === 0){ // 可根据参数内容进行判断，如果是偶数行，就将背景颜色设置蓝红色
            return {
                style:{
                    backgroundColor: 'blue', 
                },
            };
        }
},
    render: text => <a>{text}</a>,
  },

2、满足条件的行显示不同的样式

需求1:表头和最后一行背景色是蓝色

<Table
                rowKey="id"
                columns={this.bottomTableCol}
                dataSource={this.props.bottomTableData}
                rowClassName={this.getRowClassName}//为表格的最后一行添加类名，在样式中设置背景色
                className="bottomTable"
                bordered
                size="middle"
                pagination={false}
              />
getRowClassName = (record, index) => {
    let className = '';
    className = index === this.props.bottomTableData.length - 1 ? 'lastRow' : '';//为最后一行设置类名“lastRow“
    return className;
  };

在组件中引入less

 .lastRow {
      background-color: #1f78d1;
      font-weight: 900;
      color: aliceblue;
    }
    .bottomTable {//当前table下的表头
      .ant-table-thead > tr > th {
        background-color: #1f78d1;
        color: aliceblue;
      }
    }

需求2:在表格最后添加总计

在网上看了许多自定义“表尾”的方式，很麻烦，要去判断是否是后端返回数据的最后一条，是否是表格的第一列，是的话才需要添加总计，在这里建议不要直接操作表格，我是使用了把后端返回的需要加在最后一行的数据，分别对应每一列的dataIndex，也就是把需要展示在最后一行的数据，前端自己转化，push在dataSource中，这样就假扮成需要表格遍历的数据，不需要自己去处理。

3、显示页码，跳转至多少页，共多少项

需要做到：
1）引入文件
import zhCN from ‘antd/es/locale/zh_CN’;
import { ConfigProvider } from ‘antd’
2）要想样式好看引入官方样式
import ‘antd/dist/antd.css’;
3）设置你想要的初始每页显示多少条

//这里是函数组件
  const [pagination, changePagination] = useState({
    size: "small",
    showQuickJumper: true,//显示跳转
    pageSize: 3,//初始每页显示3条
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '40', '60'],//改变每页显示条数
    current: 1,
    total: 0,
    showTotal: total => `共 ${total} 项`//显示共多少项
  })
//在table组件中设置onchange属性
  //换页或者改变数据显示条数
  const handleTableChange = pager => {
    let { pageSize, current } = pager;
    //切换页码
    if (pageSize && pageSize !== pagination.pageSize) {
      current = 1;
    }
    changePagination({
      ...pagination,
      pageSize: pageSize,
      current: current
    }
    );
  };

如果是类组件

	this.state = {
	            pagination: {
	                ...pagination,
	                pageSize: 10,
	                current: 1,
	                total: 0,
	                showTotal: total => `共 ${total} 项`
	            }
	        }

   handleTableChange = pager => {
        let { pageSize, current } = pager;
        const { pagination } = this.state;
        //切换页码
        if (pageSize && pageSize !== pagination.pageSize) {
            current = 1;
        }
        this.setState({
            pagination: {
                ...pagination,
                current,
                pageSize
            }
        }, this.getListData);
    };

2、需要注意的地方

1、注意用return返回需要修改的属性
2、注意：需要修改的属性设置在行内样式style中，（个人考虑是由于行内属性权重值比较高的原因，不易出现设置的样式被其他全局属性覆盖的情况）
3、Tooltip需要从antd中倒入

二、Form表单的使用

1、校验只能输入某一类型的数据，限制输入范围

1）只能输入数字，最大是10，最小是1，引入组件InputNumber

 <Form.Item label="InputNumber">
          {getFieldDecorator('input-number', { initialValue: 3 })(<InputNumber min={1} max={10} />)}
 </Form.Item>

要想隐藏antd InputNumber中的上下加减按钮，可以在样式中添加：

.ant-input-number-handler-wrap{
    display:none
}

2）只能输入汉字，汉字个数为2-20个

<FormItem label="描述信息:">
              {getFieldDecorator("desc", {
                initialValue:undefined,
                rules: [
                  {
                    required: true,
                    // pattern: new RegExp(/^[\u4E00-\u9FA5]/),//写法一
                    // pattern: new RegExp(/^[\u4E00-\u9FA5]{2,80}$/),//写法二 
                    pattern: new RegExp(/^[^x00-xff]{2,80}$/),//写法三：非单子节字符，例如可以写-，不可以写=
                    message: '请填写版本描述信息,长度为2～80个汉字'
                  },
                  {
                    min: 2,
                    message:'最少2个字'
                  },
                  {
                    max: 80,
                    message:'最多80个字'
                  },
                ],
              })(
                <Input
                  placeholder="请输入确认信息"
                  disabled={addSure}//查看：不可编辑true、添加确认：可编辑false
                ></Input>
              )}
            </FormItem>

在PHP编程语言中，字符是分为单字节字符和多字节字符，单字节字符在存储时占1个字节，比如：英文字母、数字、常用的特殊字符等等。 多字节字符指的是在储存时占多个字节的字符，比如：中文汉字占两个字节。
总结如下：

1. 匹配双字节字符(包括汉字在内)：[ ^\ x00-\xff ]（当这个字符 ^ 出现在一个字符集合模式的第一个字符时，表示取反）
2. 匹配中文字符的正则表达式： [\u4e00-\u9fa5]
3. 常用的正则表达式（转载）
4. Unicode中文和特殊字符的编码范围 及部分正则
   （转载）
5. 在真实的项目场景中，点击确认触发表单的校验功能，关闭弹窗的命令应该写在form.validateFields( )函数里，否则就算校验不成功，点击了确认按钮弹窗也会关闭，给用户感觉请求发出，其实校验并没有通过。