ant design的table组件实现全选功能以及自定义分页

绝地灬酷狼 2022-03-17 13:54 280阅读 0赞

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 align="center">
    							<a className="edit-data" href="http://localhost:8000/zh/assetDemo/info">添加</a>    
    							<a href="http://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 + '页' + '/' + 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;

截图：  
![在这里插入图片描述][20190224202438165.gif]

[20190224202438165.gif]: /images/20220317/d9aa7fd71b404bf78b74352c01657de0.png