Antd(Ant Design)使用时遇到的问题总结

1.antd的Table组件实现自定义分页数据条数

在Table组件上的pagination属性上可以实现自定义分页数据条数

<Table dataSource={dataSource} columns={columns} 
       pagination={{ pageSize: 5 }} //自定义每页显示的数据条数
       ></Table>

2.如何获取Select组件当前选中的value值

const handleChange = (e) => {
  console.log(e)
}
<Select style={{ 'width': "200px" }} onChange={handleChange}>
   <Select.Option value="软件学院">软件学院</Select.Option>
   <Select.Option value="计算机学院">计算机学院</Select.Option>
   <Select.Option value="能动学院">能动学院</Select.Option>
</Select>

3.点击获取antd中Table组件的值

<Table
  dataSource={dataSource}
  columns={columns}
  pagination={{ pageSize: 5 }}
  onRow={(record) => {
  return {
    onClick: () => {
      setCurStu(record);
    }
  }
}}></Table>

record的值就是当前选中行的值

4.怎么实现给antd的List加纵向滚动条？

设置css样式

<List
  style={{ "height": "310px", "overflowY": "scroll" }}
  size="small"
  header={<div style={{ "textAlign": "center" }}>学生学号:{searchId}</div>}
  footer={<div style={{ "textAlign": "center" }}>共{samplingData.length}条数据</div>}
  bordered
  dataSource={samplingData}
  renderItem={(item) => <List.Item>{item}</List.Item>}
/>

5.Message全局提示：操作后弹出消息提示

import { message } from 'antd';
message.success("打卡成功！")
message.error('修改失败')

6.react+antd+Form实现添加完数据后清空表单

参考链接：https://blog.csdn.net/Z_Gleng/article/details/124718114

const addform = useRef()

< Form ref={addform} >< / Form>

在提交完表单后需要把表单置空：

addform.current.resetFields();

7.antd中select的默认值

https://blog.csdn.net/Smile_666666/article/details/109404268