当前位置：首页 > React

react如何在表格中添加序列

2026-01-25 16:54:45React

在 React 表格中添加序列列

在 React 表格中添加序列列（即行号）可以通过多种方式实现。以下是几种常见的方法：

方法一：使用数组索引

在渲染表格行时，直接使用数组的索引作为序列号。这种方式简单直接，适用于静态数据或不需要动态更新的情况。

const data = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

function TableWithIndex() {
  return (
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={item.id}>
            <td>{index + 1}</td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

方法二：使用自定义序号

如果需要更灵活的序号控制（如分页时的序号），可以在渲染时计算序号。

function TableWithCustomIndex({ data, currentPage, itemsPerPage }) {
  const startIndex = (currentPage - 1) * itemsPerPage;

  return (
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={item.id}>
            <td>{startIndex + index + 1}</td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

方法三：使用表格库

如果使用第三方表格库如 react-table 或 Material-UI 的 Table，可以在列定义中添加序号列。

import { useTable } from 'react-table';

function ReactTableWithIndex({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns: [
      {
        Header: '序号',
        accessor: 'index',
        Cell: ({ row }) => row.index + 1
      },
      ...columns
    ],
    data
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

方法四：使用 CSS 计数器

对于简单的静态表格，可以使用 CSS 计数器自动生成序号，无需修改 React 组件。

// CSS
.table-with-counter {
  counter-reset: rowNumber;
}

.table-with-counter tbody tr {
  counter-increment: rowNumber;
}

.table-with-counter tbody tr td:first-child::before {
  content: counter(rowNumber);
}

// React组件
function TableWithCssCounter({ data }) {
  return (
    <table className="table-with-counter">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td></td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}