vuejs 每 25 或 50 条记录重复一个图例行 table

Question

我已经有 VueJS v-for 工作正常：

<tr v-for="request in requests">
    <td>{{request.name}}</td>
    <td> .. etc .. </td>
</tr>

现在我需要添加一个 legend/guiding 行，比如每 25 或 50 条记录，如下所示：

<span v-for="(request, index) in requests">
    <tr>
        <td>{{request.name}}</td>
        <td> .. etc .. </td>
    </tr>
    <tr v-if="index % 25 == 0">
        <th>Name</th>
        <th> .. etc .. </th>
    </tr>
</span>

令我惊讶的是，不仅 v-if 部分不起作用，而且我还返回了一个错误："ReferenceError: request is not defined"（即使我离开了 v-if 指令，甚至删除了额外的 <tr> 完全），所以 VueJS 正在考虑 DOM 结构，也许我还不明白。

无论哪种方式，我该怎么做？

顺便说一句，有没有纯粹的 HTML/CSS 方法来做到这一点？

Answer 1

您的代码无效 HTML。你不能让 spans 换行 trs.

通常无效的 HTML 没什么大不了的，但是浏览器在处理无效的 tr/tds 放置时非常错误（规范不清楚是什么他们应该在出错的情况下做，所以他们以特定的方式针对特定的 cases/errors).

正确的做法is to use <template>s, aka "Conditional Groups"：

<table>
    <template v-for="(request, index) in requests">
        <tr>
            <td>{{request.name}}</td>
            <td> .. etc .. </td>
        </tr>
        <tr v-if="index % 25 == 0">
            <th>Name</th>
            <th> .. etc .. </th>
        </tr>
    </template>

重现您的错误的演示：

new Vue({
  el: '#app',
  data: {
    requests: [{name: 'a1'},{name: 'a2'},{name: 'a3'},{name: 'a4'},{name: 'a5'},{name: 'a6'},{name: 'a7'},{name: 'a8'}]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <table border="1">
    <span v-for="(request, index) in requests">
      <tr>
        <td>{{request.name}}</td>
        <td> .. etc .. </td>
      </tr>
      <tr v-if="index % 3 == 0">
        <th>Name</th>
        <th> .. etc .. </th>
      </tr>
    </span>
  </table>
  
</div>

修复后的演示：

new Vue({
  el: '#app',
  data: {
    requests: [{name: 'a1'},{name: 'a2'},{name: 'a3'},{name: 'a4'},{name: 'a5'},{name: 'a6'},{name: 'a7'},{name: 'a8'}]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <table border="1">
    <template v-for="(request, index) in requests">
      <tr>
        <td>{{request.name}}</td>
        <td> .. etc .. </td>
      </tr>
      <tr v-if="index % 3 == 0">
        <th>Name</th>
        <th> .. etc .. </th>
      </tr>
    </template>
  </table>
  
</div>

vuejs 每 25 或 50 条记录重复一个图例行 table

vuejs repeat a legend row to table every 25 or 50 records

html

vue.js

v-for