react+hook+antd实现table表格

一 引入依赖

react+hook+antd实现table表格_第1张图片

二 创建组件

react+hook+antd实现table表格_第2张图片

三 初始化usestate

 

四 html 部分编写

使用Table组件引入并放入对应节点对应的api组件库都有,可以查看

react+hook+antd实现table表格_第3张图片

五 编写表头和表格数据获取

表头数据可以根据接口文档去写,表格数据从接口获取

react+hook+antd实现table表格_第4张图片

 react+hook+antd实现table表格_第5张图片

 六 编辑弹窗

利用antd的组件去创建表格内弹窗

react+hook+antd实现table表格_第6张图片

 七 实现页面

下面就是简单的页面渲染之后的样子

react+hook+antd实现table表格_第7张图片

具体api大家可以在antd官方组件库中查看 

你可能感兴趣的:(React,ant,design,Pro,react.js,前端,reactjs)