先看效果，使用實(shí)現(xiàn)一個(gè)表格和分頁(yè)：

代碼很簡(jiǎn)單：這里我只在columns數(shù)組里面放了兩行數(shù)據(jù)，實(shí)際測(cè)試的時(shí)候，可以根據(jù)每頁(yè)分頁(yè)的條數(shù)，來(lái)多添加幾條數(shù)據(jù)。

參考代碼，很簡(jiǎn)單，注意，這里引入了App.css，也就是基于了antd的樣式來(lái)寫(xiě)的：

參考代碼

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

const {Column} = Table;

class Home extends React.Component{
    //構(gòu)造方法
    constructor(){
        super()
        this.state={           
              columns : [
                {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "王一博",
                  "viewPeople": "測(cè)試",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字節(jié)跳動(dòng)",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                },
                 {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖戰(zhàn)",
                  "viewPeople": "測(cè)試",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字節(jié)跳動(dòng)",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖戰(zhàn)",
                  "viewPeople": "測(cè)試",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字節(jié)跳動(dòng)",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖戰(zhàn)",
                  "viewPeople": "測(cè)試",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字節(jié)跳動(dòng)",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖戰(zhàn)",
                  "viewPeople": "測(cè)試",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字節(jié)跳動(dòng)",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }, {
                  "deviceId": "EAFA6CCF3CDD",
                  "name": "肖戰(zhàn)",
                  "viewPeople": "測(cè)試",
                  "card": "13125234",              
                  "phone": "13661725475",
                  "organName": "字節(jié)跳動(dòng)",                               
                  "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
                }
              ]
        }
    }

    render(){
      return (
        <Table dataSource ={this.state.columns} pagination={{pageSize:5}}> 
        <Column title ='序號(hào)' dataIndex='backupNo' render ={(text,recorder,index) => <span>{index +1}</span>}/>    
        <Column title ='編號(hào)' dataIndex='deviceId' />
        <Column title ='姓名' dataIndex='name' />
        <Column title ='部門(mén)名稱(chēng)' dataIndex='organName' />
        <Column title ='職位' dataIndex='viewPeople' />
        <Column title ='卡號(hào)' dataIndex='card' />
        <Column title ='手機(jī)號(hào)' dataIndex='phone' />
        </Table>  
      )
    }
}
export default Home