欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

带复选框的表格(ant design)

程序员文章站 2024-02-05 12:51:58
...

要写个带复选框的表格,效果如下:

带复选框的表格(ant design)

然而在官网看到这代码有点无语:

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

我要的不是固定数据啊!!!于是开始探索~~

1、导入:

import { Table } from 'antd';
//这个是前后台分离的,userInfo为后台数据获取方法
import { userInfo } from '../../../api.js'

2、表格栏:

const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

3、主体:

export default class personInfo extends  Component{
    constructor() {
        super();
        this.state = {
            dataList:[],//表格列表
            pagination: {//自定义分页器
                showTotal: total => `共 ${total} 项`
            },
        };
    }
    componentWillMount(){
        //表格数据
        personInfo({pageSize:10,pageNum:1}).then(res => res.json()).then((res) => {
            if (res.meta.code && res.meta.code == '200') {
            
                if((res.data.total/10)>50){    
                    this.state.pagination.showQuickJumper=true;
                }
                if (res.pageSize >= res.total) {    //不足一页,分页器禁用
                    this.state.pagination = false
                }
                this.setState({
                    dataList:res.data['records'],
                    pagination:{
                        total:res.data['total'],
                        onChange:this.pageChange,
                    }
                })
            }
        })
    }
    //表格使用

    render(){
        return (
            <Table
                   dataSource={this.state.dataList}
                   columns={this.columns}
                   rowKey={"userName"}    //如果数据中没有“key”这栏,必须要手动指定,否则会出错
                   rowSelection={this.rowSelection}//复选框
                   bordered    //要边框
                   pagination = {this.state.pagination}
            />
) }
//其他函数
    rowSelection = {    //复选框选定
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
        }),
    };

    pageChange = (page, pageSize) => {    //当前页码更改,page:请求的当前页码,pagesize:每页大小
        this.setState({
            loading:true,
        })
        let para = {pageNum:page, pageSize: pageSize};
       personInfo(para).then(res => res.json()).then((res) => {
           this.setState({
               dataList:res.data['records'],
               loading:false,
           })
        })
    };

其他补充:

res.data的其他值:

total:总记录数

size:每页大小,默认为10

pages:总页数

current:当前页码

自定义分页器效果:

带复选框的表格(ant design)