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

最新推荐文章于 2024-08-23 15:27:17 发布

Of_the

最新推荐文章于 2024-08-23 15:27:17 发布

阅读量9.2k

点赞数 6

分类专栏： ant design学习

本文链接：https://blog.csdn.net/qq_41140741/article/details/87907288

版权

本文介绍了如何在Ant Design的Table组件中实现全选功能，并详细讲解了自定义分页的实现过程，通过代码示例和截图辅助理解，帮助开发者更好地运用Table组件。

摘要由CSDN通过智能技术生成

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) : [],
		});
	};

	getDa