如何在VueJS中实现每25或50条记录重复表头行？

DevOps 小满

2026-5-22

Got it, let's get this working right while adding those repeating headers you need! First, a quick note: wrapping <tr> elements in a <span> isn't valid HTML for tables—Vue gives us the perfect workaround with the <template> tag, which acts as an invisible loop container without messing up your table structure.

Here's the corrected, functional code:

<table>
  <!-- Optional: Keep a fixed header at the top of the table -->
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <!-- Add all your other header columns here -->
    </tr>
  </thead>
  <tbody>
    <template v-for="(request, index) in requests" :key="request.id">
      <!-- Your existing data row -->
      <tr>
        <td>{{ request.name }}</td>
        <td>{{ request.status }}</td>
        <!-- Match your data columns to the headers -->
      </tr>
      <!-- Insert header row AFTER every 25th record -->
      <tr v-if="(index + 1) % 25 === 0" class="repeated-header">
        <th>Name</th>
        <th>Status</th>
        <!-- Duplicate your header columns here -->
      </tr>
    </template>
  </tbody>
</table>

Key details to note:

Using <template>: This keeps your table HTML valid—no weird wrapper elements cluttering up the DOM. Vue processes the template but doesn't render it to the page.
Adjusting the interval condition: The (index + 1) % 25 === 0 check makes sure the header appears right after the 25th, 50th, 75th, etc., records. If you want the header to show before every 25th group (including the very top), switch to index % 25 === 0 instead.
Unique :key: Always add a unique key to your v-for loops—using request.id (assuming your request objects have a unique identifier) is better than index for performance, especially if your data might update.
Styling the repeated header: Add a CSS class like repeated-header to make those recurring headers stand out:
```
.repeated-header {
  background-color: #f5f5f5;
  border-top: 2px solid #ddd;
  font-weight: bold;
}
```