在使用 Alpine.js 筛选行后保留 table 的斑马条纹

Question

我有一个 table 有斑马条纹。

我正在使用 Alpine.js 根据您单击的按钮过滤行。

过滤 table 时，行条带化来自原始的未过滤状态。

我希望在更新过滤器时重新计算条带化。

代码如下，我创建了一个 CodePen。

<div x-data="{ filterID: 'all', filter: (id, allowed) => allowed.includes(id) }">
  <nav class="mb-4">
    <a
      class="bg-purple-200 hover:bg-purple-400"
      @click.prevent="filterID = 'all', striping"
      :class="{ 'bg-purple-400' : filterID === 'all' }"
      href="#"
    >All</a>
    <a
      class="bg-purple-200 hover:bg-purple-400"
      @click.prevent="filterID = 'A'"
      :class="{ 'bg-purple-400' : filterID === 'A' }"
      href="#"
    >A</a>
    <a
      class="bg-purple-200 hover:bg-purple-400"
      @click.prevent="filterID = 'B'"
      :class="{ 'bg-purple-400' : filterID === 'B' }"
      href="#"
    >B</a>
  </nav>
  
  <table>
    <thead>
      <th>Column A</th>
      <th>Column B</th>
    </thead>
    <tbody>
      <tr
        x-show.transition="filter(filterID, [ 'A' ]) || filterID === 'all'"
        :class="{ 'active': filter(filterID, [ 'A' ]) }"
        class=""
      >
        <td>Data 1A</td>
        <td>Data 1B</td>
      </tr>
      <tr
        x-show.transition="filter(filterID, [ 'B' ]) || filterID === 'all'"
        :class="{ 'active': filter(filterID, [ 'B' ]) }"
        class="bg-purple-200"
      >
        <td>Data 2A</td>
        <td>Data 2B</td>
      </tr>
      <tr
        x-show.transition="filter(filterID, [ 'A' ]) || filterID === 'all'"
        :class="{ 'active': filter(filterID, [ 'A' ]) }"
        class=""
      >
        <td>Data 3A</td>
        <td>Data 3B</td>
      </tr>      
    </tbody>
  </table>
</div>

Answer 1

使用 :key="row.id" 为这些项目指定特定的 ID。这样，alpine.js 将从 DOM 中删除非活动行，因此 odd/even 计数不会因行被隐藏而混乱。

在使用 Alpine.js 筛选行后保留 table 的斑马条纹

Retain zebra striping of table after rows are filtered with Alpine.js

alpine.js