Alpine.js v3.7.0实现数据表格子行时x-for多根节点不渲染如何解决

你遇到的问题确实是Alpine.js 3.x默认要求x-for的<template>内只能有单个根元素导致的，第二个<tr>会被直接忽略。目前最优的合规解决方案如下：

使用多<tbody>分组实现，该方案完全符合HTML规范，不会破坏原有布局：
HTML标准允许<table>下存在多个<tbody>元素，且<tbody>默认无额外样式，不会影响表格的边框合并、对齐等原有特性，是业内实现表格可展开行的通用方案。
示例代码如下：

<table>
  <!-- 表头thead部分省略 -->
  <template x-for="row in currentPageData" :key="row.id">
    <tbody>
      <tr @click="row.expanded = !row.expanded">
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
      </tr>
      <tr x-show="row.expanded">
        <td colspan="3">
          可展开的附加内容
        </td>
      </tr>
    </tbody>
  </template>
</table>

注意<tbody>不允许嵌套，所以需要去掉原来包裹在循环模板外的单层<tbody>，直接将循环生成的<tbody>作为<table>的直接子元素即可。如果需要保留展开切换逻辑，只需给主行绑定点击事件修改对应row的expanded状态即可控制子行的显示隐藏。

内容的提问来源于stack exchange，提问作者Matanya