我就廢話不多說了，大家還是直接看程式碼吧~

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',key: '2',{
  title: '年齡',dataIndex: 'age',key: '3',{
  title: '住址',dataIndex: 'address',key: '4',{
  title: '電話',dataIndex: 'phone',key: '5',{
  title: '操作',dataIndex: 'operation',render(text,record) {
   console.log(111,record);
   return (
   <div align="center">
    <a className="edit-data" href="http://localhost:8000/zh/assetDemo/info" rel="external nofollow" >新增</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://localhost:8000/zh/assetDemo/edit" rel="external nofollow" >編輯</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <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;

截圖：

補充知識：ant design pro帶分頁 自定義表格列 搜尋表格元件封裝

ant design pro中有一個基礎表格的封裝，但是分頁是前端分頁處理資料；

專案中每個頁面都有用到表格，且表格都有分頁、搜尋、自定義表格，所以封裝了一個定製的表格元件

實現頁面效果

元件引數

封裝的注意點

分頁

排序

搜尋

頁面整個程式碼

元件頁面

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,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,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,};
  });
  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,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 (
   <div className={styles.RefreshTable}>
    <div className={styles.tableListOperator}>
     {handleRefresh && (
      <Button
       icon="reload"
       type="primary"
       onClick={this.handleRefresh}
       className={styles.tableRefresh}
      />
     )}
     <Popover
      onVisibleChange={this.showTableColumn}
      placement="bottomLeft"
      visible={columnVisible}
      trigger="click"
      className={styles.dropdown}
      content={
       <Checkbox.Group
        className={styles.selsectMenu}
        defaultValue={checkValue}
        onChange={this.changeColumn}
       >
        {datecolumns.map(item => (
         <Col key={`item_${item.dataIndex}`} style={{ marginBottom: '8px' }}>
          <Checkbox
           value={item.dataIndex}
           key={item.dataIndex}
           disabled={item.disabled}
           className={styles.checkboxStyle}
          >
           {item.title}
          </Checkbox>
         </Col>
        ))}
       </Checkbox.Group>
      }
     >
      <Button className={styles.refreshButton}>
       <Icon type="appstore" theme="filled" style={{ fontSize: '14px' }} />
      </Button>
     </Popover>
     {children ? <Fragment>{children}</Fragment> : null}
     {handleSearch && (
      <Search
       placeholder={searchPlaceHolder}
       style={{ width: searchWidth ? searchWidth : '200px',marginRight: '10px' }}
       value={tableParam.filterParam}
       onChange={changeSearch}
       onSearch={value => handleSearch(value)}
      />
     )}
    </div>
    <Table
     {...rest}
     rowKey={
      rowKey ||
      (record =>
       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}
    />
   </div>
  );
 }
}
 
export default RefreshTable;

呼叫元件頁面

import React,Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import { Card,Form,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,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: '名稱',disabled: true,sorter: true,{
   title: '名稱空間',dataIndex: 'namespace',width: 105,textWrap: 'ellipsis',{
   title: '更新次數',dataIndex: 'observedGeneration',width: 100,{
   title: '副本數',dataIndex: 'replicas',width: 90,{
   title: '更新副本數',dataIndex: 'updatedReplicas',width: 115,render: text => <span>{text ? text : 0}</span>,{
   title: '就緒副本',dataIndex: 'readyReplicas',{
   title: '可用副本',dataIndex: 'availableReplicas',{
   title: '建立時間',dataIndex: 'createTime',width: window.screen.width <= 1366 ? 95 : 155,render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,{
   title: '操作',dataIndex: 'operate',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,keyword: filterParam.trim(),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,};
  this.setState({
   pageNo: pagination.current,});
 
  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,};
  this.setState({
   filterParam: '',});
 
  this.getStatelessList(params);
 };
 
 handleSearch = value => {
  const { pageSize,namespace } = this.state;
  const params = {
   keyword: value.trim(),pageSize,};
  this.setState({
   filterParam: value,});
  this.getStatelessList(params);
 };
 
 changeSearch = e => {
  this.setState({
   filterParam: e.target.value,});
 };
 
 handleSpaceChange = value => {
  const { filterParam,pageSize } = this.state;
  const params = {
   keyword: filterParam.trim(),namespace: value === '' ? '' : value,};
  this.setState({
   pageNo: 1,});
 
  this.getStatelessList(params);
 };
 
 render() {
  const {
   stateless: { data },loading,route,stretchLoading,} = this.props;
  const { filterParam,current = {} } = this.state;
  const tableParam = {
   pageNo,};
 
  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 (
   <PageHeaderWrapper content={`${formatMessage({ id: `statelessCaption` })}`}>
    <Card bordered={false}>
     <RefreshTable
      tableParam={tableParam}
      data={data && data.data ? data.data : {}}
      rowKey={record => `${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 => (
       <Fragment>
        {record.message ? <span style={{ color: 'red' }}>{record.message}</span> : null}
       </Fragment>
      )}
     >
      <SearchSelect
       handleSpaceChange={
        'admin'.indexOf(getAuthority()) !== -1 ? this.handleSpaceChange : false
       }
       namespace={namespace}
       spaceData={allspace.namespace ? allspace.namespace.data.resultList : []}
      />
     </RefreshTable>
    </Card>
   </PageHeaderWrapper>
  );
 }
}
 
export default Stateless;

以上這篇ant design的table元件實現全選功能以及自定義分頁就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。