分页表格的序号怎么显示react
时间: 2024-03-11 12:50:43 浏览: 20
在 React 中,你可以使用以下代码来实现分页表格序号的显示:
1. 每页从1开始编号:
```jsx
function Table(props) {
const { data } = props;
return (
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={item.id}>
<td>{index + 1}</td>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>
);
}
```
在上述代码中,我们在表格中添加了一个新的列,显示序号。在每行中,我们使用 `index + 1` 来计算序号,并显示在第一列中。
2. 从整个表格开始编号:
```jsx
function Table(props) {
const { data, start } = props;
return (
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={item.id}>
<td>{start + index}</td>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>
);
}
```
在上述代码中,我们通过 `start` 属性来指定整个表格的起始序号。在每行中,我们使用 `start + index` 来计算序号,并显示在第一列中。
以上代码仅供参考,具体实现方式还需根据实际情况进行调整。