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

王小婷

发布于 2019-11-27 21:15:00

1.2K0

发布于 2019-11-27 21:15:00

文章被收录于专栏：编程微刊编程微刊

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

代码很简单：这里我只在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 (
        <Table dataSource ={this.state.columns} pagination={{pageSize:5}}> 
        <Column title ='序号' dataIndex='backupNo' render ={(text,recorder,index) => <span>{index +1}</span>}/>    
        <Column title ='编号' dataIndex='deviceId' />
        <Column title ='姓名' dataIndex='name' />
        <Column title ='部门名称' dataIndex='organName' />
        <Column title ='职位' dataIndex='viewPeople' />
        <Column title ='卡号' dataIndex='card' />
        <Column title ='手机号' dataIndex='phone' />
        </Table>  
      )
    }
}
export default Home

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css