React使用@material-ui/lab Pagination实现带省略号的分页效果

数据老陈

2026-8-27

@material-ui/lab分页组件实现页码省略折叠方法

问题描述

基于React实现分页功能时，使用@material-ui/lab的Pagination组件默认渲染全部页码，需要配置为超出展示范围的页码自动以...折叠省略的效果。
现有App.js核心实现代码：

const App = () => {
  const [workstations, setWorkstations] = useState([]);
  let [page, setPage] = useState(1);
  const PER_PAGE = 1;

  useEffect(() => {
    loadWorkstations();
  }, []);

  const loadWorkstations = async () => {
    const request = await getWorkstations();
    const result = request.data;
    setWorkstations(result);
  };

  const count = Math.ceil(workstations.length / PER_PAGE);
  const _DATA = usePagination(workstations, PER_PAGE);

  const handleChange = (e, p) => {
    setPage(p);
    _DATA.jump(p);
  };

  return (
    <Pagination
      count={count}
      size="large"
      page={page}
      variant="outlined"
      color="primary"
      onChange={handleChange}
    />
  );
};

实现方式

Pagination组件原生支持页码折叠能力，无需额外编写自定义逻辑，只需新增两个配置属性：

siblingCount：控制当前选中页码两侧展示的相邻页码数量，常规场景设为1即可
boundaryCount：控制分页栏首尾固定展示的页码数量，常规场景设为1即可

修改后的Pagination组件代码：

<Pagination
  count={count}
  size="large"
  page={page}
  variant="outlined"
  color="primary"
  onChange={handleChange}
  siblingCount={1}
  boundaryCount={1}
/>

配置完成后，组件会自动在页码超出展示范围时插入省略号，达到预期折叠效果。如果需要调整可见页码的数量，直接修改两个属性的数值即可。