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

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 (
						
添加     编辑     self.handleDel(record.id)} > 删除
); } } ]; } render() { const {selectedRowKeys} = this.state; const { data } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, hideDefaultSelections: true, onSelection: this.onSelection, }; return (
{ let pageNum = Math.ceil(count / this.state.pageSize); return '共 ' + pageNum + '页' + '/' + count + ' 条数据'; }, onShowSizeChange: this.onShowSizeChange }} bordered />
全选 批量删除
); } } export default TestComponent;

截图:
ant design的table组件实现全选功能以及自定义分页_第1张图片

你可能感兴趣的:(ant,design学习)