从零开始学习React-实现一个表格和分页（九）

先看效果，使用实现一个表格和分页：

代码很简单：这里我只在columns数组里面放了两行数据，实际测试的时候，可以根据每页分页的条数，来多添加几条数据。

参考代码，很简单，注意，这里引入了App.css，也就是基于了antd的样式来写的：

参考代码

import React from "react"
import '../asset/css/App.css';
import {Table} from "antd"

const {Column} = Table;

class Home extends React.Component{
    //构造方法
    constructor(){
        super()
        this.state={           
              columns : [
                {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "王一博",
                  "viewPeople": "测试",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字节跳动",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                },
                 {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖战",
                  "viewPeople": "测试",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字节跳动",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖战",
                  "viewPeople": "测试",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字节跳动",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖战",
                  "viewPeople": "测试",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字节跳动",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖战",
                  "viewPeople": "测试",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字节跳动",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖战",
                  "viewPeople": "测试",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字节跳动",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }
              ]
        }
    }

    render(){
      return (
         {index +1}}/>    
        
        
        
        
        
        
          
      )
    }
}
export default Home