我就废话不多说了，大家还是直接看代码吧~
ant design的table组件实现全选功能以及自定义分页
直接附上全部代码以及截图了
import './index.scss';
import React from 'react';
import {Checkbox, Table, Pop/confirm/i} 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});
};
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;
};
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 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
按名称搜索
封装的注意点
分页
排序
搜索
页面整个代码
组件页面
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Table, Button, Input, Checkbox, Icon, Popover, Col } from 'antd';
import styles from './index.less';
const { Search } = Input;
function initColumns(columns) {
const lists = columns.map(i => {
return {
show: true,
...i,
};
});
return lists;
}
function filterColumes(columns) {
const filterData = columns.filter(i => !!i.dataIndex);
const initColumn = filterData.map(i => {
return {
dataIndex: i.dataIndex,
show: i.show,
};
});
return initColumn;
}
function saveColumns(list, path) {
const str = localStorage.getItem(path);
let columns = [];
if (str) {
const storage = JSON.parse(str);
list.forEach(item => {
const one = storage.find(i => i.dataIndex === item.dataIndex);
const obj = {
...item,
};
if (one) {
obj.show = one.show;
}
columns.push(obj);
});
} else {
const simple = filterColumes(list);
localStorage.setItem(path, JSON.stringify(simple));
columns = list;
}
return columns;
}
@connect(({ allspace }) => ({
allspace,
}))
class RefreshTable extends PureComponent {
static defaultProps = {
search: true,
searchPlaceHolder: '按名称模糊搜索',
save: true,
scrollFlag: false,
scrollY: 0,
scroll: false,
};
constructor(props) {
super(props);
this.state = {
datecolumns: [],
width: 0,
columnVisible: false,
};
}
componentDidMount() {
this.initData();
}
componentWillReceiveProps(nextProps) {
this.initData(); // todo 关于这儿是否有bug测试
// clean state
const { datecolumns } = this.state;
if (nextProps.columns.length > 0 && datecolumns.length > 0) {
const datecolumnsRefresh = nextProps.columns.map((i, idx) => {
let nowData = '';
datecolumns.forEach(item => {
if (item.dataIndex === i.dataIndex) {
nowData = item;
}
});
const { show } = nowData;
const obj = {
...nowData,
...i,
show,
};
return obj;
});
this.setState({
datecolumns: datecolumnsRefresh,
});
}
}
initData = () => {
const { scrollFlag, columns, save, pathName } = this.props;
let { width } = this.state;
const initData = initColumns(columns);
let datecolumns = null;
if (save) {
datecolumns = saveColumns(initData, pathName);
} else {
datecolumns = initData;
}
if (scrollFlag) {
datecolumns.forEach(item => {
if (item.show) {
width += item.width;
}
});
this.setState({
width,
datecolumns,
});
} else {
this.setState({
datecolumns,
});
}
};
defaultList = () => {
const { datecolumns = [] } = this.state;
const defaultCheckedList = [];
datecolumns.forEach(item => {
if (item.show) {
defaultCheckedList.push(item.dataIndex);
}
});
return defaultCheckedList;
};
handleTableChange = (pagination, filters, sorter) => {
const { onChange } = this.props;
const { datecolumns } = this.state;
if (onChange) {
onChange(pagination, filters, sorter);
}
if (sorter.field) {
datecolumns.forEach(item => {
item.sortOrder = false;
item.dataIndex === sorter.field && (item.sortOrder = sorter.order);
});
this.setState({
datecolumns,
});
} else {
datecolumns.forEach(item => {
item.sortOrder = false;
});
this.setState({
datecolumns,
});
}
};
handleColumnVisible = () => {};
showTableColumn = visible => {
this.setState({
columnVisible: visible,
});
};
changeColumn = value => {
const { scrollFlg, pathName } = this.props;
const { datecolumns } = this.state;
let width = 0;
const arr = [];
datecolumns.forEach(item => {
const obj = {
...item,
};
if (value.indexOf(item.dataIndex) !== -1) {
obj.show = true;
if (scrollFlg) {
width += obj.width;
}
} else {
obj.show = false;
}
arr.push(obj);
});
this.setState({
datecolumns: arr,
width,
});
const storage = arr.map(i => {
return {
dataIndex: i.dataIndex,
show: i.show,
};
});
localStorage.setItem(pathName, JSON.stringify(storage));
};
handleCancel = () => {
this.setState({
columnVisible: false,
});
};
handleRefresh = () => {
const { handleRefresh } = this.props;
const { datecolumns } = this.state;
if (handleRefresh) {
datecolumns.forEach(item => {
item.sortOrder = false;
});
this.setState({
datecolumns,
});
handleRefresh();
}
};
render() {
const {
scroll,
scrollY,
data,
children,
rowKey,
searchPlaceHolder,
tableParam,
handleRefresh,
handleSearch,
changeSearch,
pageSizeArr,
searchWidth,
...rest
} = this.props;
const { resultList = [], totalsize = 0 } = data;
const { columnVisible, datecolumns, width } = this.state;
const defaultScroll = {};
if (scroll) {
defaultScroll.x = width;
}
if (scrollY) {
defaultScroll.y = scrollY;
}
const paginationProps = {
showSizeChanger: true,
showQuickJumper: true,
showTotal: () =>
`共${totalsize}条记录 第${tableParam.pageNo}/${Math.ceil(
totalsize / tableParam.pageSize
)}页`,
current: tableParam.pageNo,
pageSize: tableParam.pageSize,
total: totalsize,
pageSizeOptions: pageSizeArr ? pageSizeArr : ['10', '20', '30', '40'],
};
const checkValue = this.defaultList();
return (
{handleRefresh && (
)}
{datecolumns.map(item => (
{item.title}
))}
}
>
{children ? {children} : null}
{handleSearch && (
handleSearch(value)}
/>
)}
record.id || (record.namespace ? record.name + '/' + record.namespace : record.name))
}
size="middle"
loading={tableParam.loading}
dataSource={resultList}
pagination={paginationProps}
scroll={defaultScroll}
columns={datecolumns.filter(item => item.show === true)}
onChange={this.handleTableChange}
/>
);
}
}
export default RefreshTable;
调用组件页面
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import { Card, Form, Icon, Tooltip } from 'antd';
import RefreshTable from '@/components/RefreshTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import SearchSelect from '@/components/SearchSelect';
import { getAuthority } from '@/utils/authority';
import moment from 'moment';
@connect(({ stateless, allspace, loading }) => ({
stateless,
allspace,
loading: loading.models.stateless,
stretchLoading: loading.effects['stateless/stretch'],
}))
@Form.create()
class Stateless extends PureComponent {
state = {
pageSize: 10,
pageNo: 1,
filterParam: '',
sortBy: '',
sortFlag: 'desc',
namespace: '',
};
columns = [
{
title: '名称',
dataIndex: 'name',
disabled: true,
sorter: true,
},
{
title: '命名空间',
dataIndex: 'namespace',
width: 105,
textWrap: 'ellipsis',
},
{
title: '更新次数',
dataIndex: 'observedGeneration',
sorter: true,
width: 100,
},
{
title: '副本数',
dataIndex: 'replicas',
sorter: true,
width: 90,
},
{
title: '更新副本数',
dataIndex: 'updatedReplicas',
sorter: true,
width: 115,
render: text => {text ? text : 0},
},
{
title: '就绪副本',
dataIndex: 'readyReplicas',
sorter: true,
width: 100,
render: text => {text ? text : 0},
},
{
title: '可用副本',
dataIndex: 'availableReplicas',
sorter: true,
width: 100,
render: text => {text ? text : 0},
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true,
width: window.screen.width <= 1366 ? 95 : 155,
render: val => {moment(val).format('YYYY-MM-DD HH:mm:ss')},
},
{
title: '操作',
dataIndex: 'operate',
disabled: true,
width: 150,
},
];
componentDidMount() {
this.getStatelessList();
}
getStatelessList = value => {
const { dispatch } = this.props;
let params = {};
if (!value) {
const { pageSize, pageNo, filterParam, sortBy, sortFlag, namespace } = this.state;
params = {
pageSize,
pageNo,
keyword: filterParam.trim(),
sortBy,
sortFlag,
namespace,
};
} else {
params = value;
}
dispatch({
type: 'stateless/fetch',
payload: params,
});
};
handleStandardTableChange = (pagination, filtersArg, sorter) => {
const { filterParam, namespace } = this.state;
const params = {
pageNo: pagination.current,
pageSize: pagination.pageSize,
keyword: filterParam.trim(),
namespace,
};
this.setState({
pageNo: pagination.current,
pageSize: pagination.pageSize,
});
if (sorter.field) {
params.sortBy = sorter.field;
params.sortFlag = sorter.order.slice(0, -3);
this.setState({
sortBy: sorter.field,
sortFlag: sorter.order.slice(0, -3),
});
} else {
this.setState({
sortBy: '',
sortFlag: '',
});
}
this.getStatelessList(params);
};
handleRefresh = () => {
const params = {
keyword: '',
pageSize: 10,
pageNo: 1,
namespace: '',
};
this.setState({
filterParam: '',
pageNo: 1,
pageSize: 10,
namespace: '',
sortBy: '',
sortFlag: '',
});
this.getStatelessList(params);
};
handleSearch = value => {
const { pageSize, sortBy, sortFlag, namespace } = this.state;
const params = {
keyword: value.trim(),
pageSize,
pageNo: 1,
sortBy,
sortFlag,
namespace,
};
this.setState({
filterParam: value,
pageNo: 1,
});
this.getStatelessList(params);
};
changeSearch = e => {
this.setState({
filterParam: e.target.value,
});
};
handleSpaceChange = value => {
const { filterParam, sortBy, sortFlag, pageSize } = this.state;
const params = {
keyword: filterParam.trim(),
pageSize,
pageNo: 1,
namespace: value === '' ? '' : value,
sortBy,
sortFlag,
};
this.setState({
pageNo: 1,
namespace: value === '' ? '' : value,
});
this.getStatelessList(params);
};
render() {
const {
stateless: { data },
loading,
route,
allspace,
stretchLoading,
} = this.props;
const { filterParam, pageSize, pageNo, namespace, current = {} } = this.state;
const tableParam = {
pageNo,
pageSize,
filterParam,
loading,
};
const keyArr = [];
if (data && data.data && data.data.resultList) {
data.data.resultList
.filter(item => item.message)
.forEach(item => {
keyArr.push(`${item.name}/${item.namespace}`);
});
}
return (
`${record.name}/${record.namespace}`}
pathName={route.name}
columns={this.columns}
changeSearch={this.changeSearch}
onChange={this.handleStandardTableChange}
handleSearch={this.handleSearch}
handleRefresh={this.handleRefresh}
expandIcon={record => CustomExpandIcon(record)}
expandedRowKeys={keyArr}
expandedRowRender={record => (
{record.message ? {record.message} : null}
)}
>
);
}
}
export default Stateless;
以上这篇ant design的table组件实现全选功能以及自定义分页就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。
JavaScript相关栏目本月热门文章
- 1【Linux驱动开发】设备树详解（二）设备树语法详解
- 2别跟客户扯细节
- 3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
- 4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
- 5【分页】常见两种SpringBoot项目中分页技巧
- 6一文带你搞懂OAuth2.0
- 7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
- 8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
- 9JavaSE - 封装、static成员和内部类
- 10树莓派mjpg-streamer实现监控及拍照功能调试
- 11用c++写一个蓝屏代码
- 12从JDK8源码中看ArrayList和LinkedList的区别
- 13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
- 14在openwrt使用C语言增加ubus接口（包含C uci操作）
- 15Spring 解决循环依赖
- 16SpringMVC——基于MVC架构的Spring框架
- 17Andy‘s First Dictionary C++ STL set应用
- 18动态内存管理
- 19我的创作纪念日
- 20Docker自定义镜像-Dockerfile
热门相关搜索
路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名
名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号
