Antd Table 删除最后一页数据引发的序号问题

采用Antd Table组件前端分页，序号项从1开始递增，当列表第n页只有一条数据，删除该条数据序号会发生错乱。

序号错了.png

import React from "react";
import { Table, Button } from "antd";

const initDataSource = () => {
  const dataSource = [];
  for (let index = 0; index < 11; index++) {
    dataSource.push({ name: "zs" + index });
  }
  return dataSource;
};

const pageSize = 10;
class Test extends React.Component {
  state = { dataSource: initDataSource(), current: 1 };
  columns = [
    {
      dataIndex: "index",
      title: "序号",
      render: (text, record, index) => {
        const { current } = this.state;
        return (current - 1) * pageSize + index + 1;
      },
    },
    {
      dataIndex: "name",
      title: "姓名",
      render: (text, record, index) => {
        return text;
      },
    },
    {
      key: "delete",
      title: "操作",
      render: (text, record, index) => {
        return (
          <Button onClick={() => this.handleDelete(record.name)}>删除</Button>
        );
      },
    },
  ];
  handleDelete = (name) => {
    this.setState((preState) => {
      const _dataSource = [...preState.dataSource];
      _dataSource.forEach((element, index) => {
        element.name === name && _dataSource.splice(index, 1);
      });
      return { dataSource: _dataSource };
    });
  };

  handleChange = (pagination) => {
    this.setState({ current: pagination.current });
  };
  render() {
    const { dataSource } = this.state;
    return (
      <div>
        <Table
          columns={this.columns}
          dataSource={dataSource}
          rowKey="name"
          onChange={this.handleChange}
        ></Table>
      </div>
    );
  }
}

export default Test;

发生错乱的原因在于dataSource的长度变化时当实际最大页数小于current应设置current为最后一页。

componentDidUpdate(prevProps, prevState) {
    const { dataSource: preDataSource } = prevState;
    const { current, dataSource } = this.state;
    if (preDataSource.length !== dataSource.length) {
      const maxCurrent = Math.ceil(dataSource.length / pageSize);
      current === 0 && maxCurrent > 0 && this.setState({ current: 1 });
      current !== 0 &&
        maxCurrent < current &&
        this.setState({ current: maxCurrent });
    }
  }

如果Table带有过滤条件，则需要根据实际显示的dataSource调整current。当触发过滤条件时通过回调onChange可以获取实际显示的数据currentDataSource，dataSource变化时实际渲染的数据可取dataSource和currentDataSource的交集。

  handleChange = (pagination, filters, sorter, extra) => {
    this.setState({
      current: pagination.current,
      currentDataSource: extra.currentDataSource,
    });
  };
componentDidUpdate(prevProps, prevState) {
    const { dataSource: preDataSource } = prevState;
    const { current, dataSource, currentDataSource } = this.state;
    if (preDataSource.length !== dataSource.length) {
      let _dataSource;
      if (currentDataSource) {
        _dataSource = _.intersectionBy(currentDataSource, dataSource, "name");
      } else {
        _dataSource = dataSource;
      }
      const maxCurrent = Math.ceil(_dataSource.length / pageSize);
      current === 0 && maxCurrent > 0 && this.setState({ current: 1 });
      current !== 0 &&
        maxCurrent < current &&
        this.setState({ current: maxCurrent });
    }
  }

总结

关键点在计算实际渲染的数据长度，如果长度小于current则要修正current。