我就废话不多说了，大家还是直接看代码吧~
ant design的table组件实现全选功能以及自定义分页
直接附上全部代码以及截图了
import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.state = { visible: false, indeterminate: true, checkAll: false, data: this.getData(), pageSize: 10 }; } state = { collapsed: false, mode: 'inline', selectedRowKeys: [], value: undefined, }; onChange = (value) => { console.log(value); this.setState({ value }); }; onSelectChange = (selectedRowKeys) => { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({selectedRowKeys}); }; /** * 全选 * @param e */ onCheckAllChange = (e) => { const { data } = this.state; this.setState({ selectedRowKeys: e.target.checked ? data.map((item, index) => index) : [], }); }; getData = () => { const data = []; for (let i = 0; i < 8; i++) { data.push({ id: '00'+i, name: '张三'+i, age: i, address: '重庆市区...', phone: 247839279, }); } return data; }; /** * 删除 * @param {object} id */ handleDel = (id) => { this.setState(prevState => ({ data: prevState.data.filter(item => item.id !== id) })); }; /** * 分页的改变 */ onShowSizeChange=(current, pageSize)=> { console.log(current, pageSize); this.setState({ pageSize: pageSize, }); } get columns () { const self = this; return [ { title: '学号', dataIndex: 'id', align: 'center', key: '1', }, { title: '姓名', dataIndex: 'name', align: 'center', key: '2', }, { title: '年龄', dataIndex: 'age', align: 'center', key: '3', }, { title: '住址', dataIndex: 'address', align: 'center', key: '4', }, { title: '电话', align: 'center', dataIndex: 'phone', key: '5', }, { title: '操作', align: 'center', dataIndex: 'operation', render(text,record) { console.log(111, record); return ( <div> <a className="edit-data" href="https://localhost:8000/zh/assetDemo/info" >添加</a> <a href="https://localhost:8000/zh/assetDemo/edit" >编辑</a> <Popconfirm title="确定删除？" onConfirm={() => self.handleDel(record.id)} > <span style={{cursor: 'pointer', color: '#3f87f6'}}>删除</span> </Popconfirm> </div> ); } } ]; } render() { const {selectedRowKeys} = this.state; const { data } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, hideDefaultSelections: true, onSelection: this.onSelection, }; return ( <div className="right"> <Table columns={this.columns} dataSource={data} rowSelection={rowSelection} pagination={{ simple: false, showSizeChanger: true, showTotal: (count) => { let pageNum = Math.ceil(count / this.state.pageSize); return '共 ' + pageNum + '页' + 'https://www.jb51.net/' + count + ' 条数据'; }, onShowSizeChange: this.onShowSizeChange }} bordered /> <div className=""> <Checkbox indeterminate={this.state.data.length !== this.state.selectedRowKeys.length && this.state.selectedRowKeys.length !== 0} onChange={this.onCheckAllChange} checked={this.state.data.length === this.state.selectedRowKeys.length} >全选 </Checkbox> <span style={{cursor: 'pointer',color: '#3f87f6'}}> 批量删除 </span> </div> </div> ); } } export default TestComponent;
截图：
补充知识：ant design pro带分页 自定义表格列 搜索表格组件封装
ant design pro中有一个基础表格的封装，但是分页是前端分页处理数据；
项目中每个页面都有用到表格，且表格都有分页、搜索、自定义表格，所以封装了一个定制的表格组件
实现页面效果
组件参数
参数 说明 类型 默认值tablePatam 表格的一些参数，pageSize/pageNo/loading/filterParam Object {}
data 表格数据 array []
rowKey 页面的唯一key string “”
pathName 页面路径 String “”
columns 表格的列数据 Array []
changeSearch 改变搜索内容的方法 function
onChange 表格排序、过滤、分页的方法调用 function
handleSearch 处理点击搜索的方法 function
handleRefresh 点击刷新按钮的方法 function
searchPlaceHolder 搜索框中的placeholder内容 String 按名称搜索
封装的注意点
分页
排序
搜索
页面整个代码
组件页面