Alpine.js：表格中嵌套x-for，如何包裹多元素且不破坏表格？

问题 #

我正在使用Alpine.js v3，尝试基于一份JSON数据创建表格。但由于JSON的层级结构，需要在<table>标签内嵌套使用x-for指令。已知x-for要求模板只能包含一个根元素，这给表格内容的正常展示带来了问题：

• 尝试用<tr><td colspan="5"><tbody>包裹内容，会破坏表格结构。
• 嵌套<table>元素虽然能运行，但会破坏父表格的列对齐，复制到其他编辑器也会出错。

我的JSON数据 #

{
  "articles": {
    "CHAPTER I": {
      "title": "GENERAL PROVISIONS",
      "articles": {
        "Article 1": {
          "title": "Subject matter",
          "paragraphs": {
            "p_1": "This Regulation lays down:",
            "(a)": "rules for the placing on the market of products with digital elements to ensure the cybersecurity of such products; ",
            "(b)": "essential requirements for the design, development and production of products with digital elements, and obligations for economic operators in relation to these products with respect to cybersecurity;"
          }
        }
      }
    }
  }
}

我的HTML代码 #

<table>
    <thead>
        <tr>
            <th></th>
            <th>Commission<br></th>
            <th>Parliament</th>
            <th>Council</th>
            <th>Comments</th>
        </tr>
    </thead>
    <template x-for="(chapter, number) in file.articles">
        <tbody>
            <tr>
                <td colspan="5">
                    <h3 x-text="number + ': ' + chapter.title"></h3>
                </td>
            </tr>
            <template x-for="(article, number) in chapter.articles">
                <tr>
                    <td colspan="5">
                        <h4 x-text="number + ': ' + article.title"></h4>
                    </td>
                </tr>
                <template x-for="(paragraph, nb_paragraph) in article.paragraphs">
                    <tr>
                        <td x-text="nb_paragraph"></td>
                        <td x-text="paragraph"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </template>
            </template>
        </tbody>
    </template>
</table>

可行解决方案 #

方案1：利用表格支持多个<tbody>的特性（推荐） #

HTML原生允许一个表格包含多个<tbody>元素，这完美适配x-for的单根元素要求。你当前的代码逻辑已经符合这个规范，只需确认file数据已正确绑定到Alpine组件即可正常渲染：

• 每个章节对应一个独立的<tbody>，作为外层x-for的根元素
• 章节内的标题行、文章行、段落行全部放在该<tbody>内部，完全符合表格结构规范
• 嵌套的x-for直接放在<tbody>中，无需额外包裹元素，不会破坏布局或列对齐

方案2：扁平化数据结构 #

若不想依赖多<tbody>特性，可先在JavaScript中将层级化的JSON数据转为一维数组，把章节、文章、段落的层级逻辑转移到数据处理阶段，再用单层x-for渲染：

// 在Alpine组件内处理数据
data() {
    return {
        file: {/* 你的原始JSON数据 */},
        flattenedRows: []
    }
},
init() {
    this.flattenedRows = [];
    // 遍历章节
    Object.entries(this.file.articles).forEach(([chapterNum, chapter]) => {
        // 添加章节标题行
        this.flattenedRows.push({
            type: 'chapter',
            content: `${chapterNum}: ${chapter.title}`
        });
        // 遍历文章
        Object.entries(chapter.articles).forEach(([articleNum, article]) => {
            // 添加文章标题行
            this.flattenedRows.push({
                type: 'article',
                content: `${articleNum}: ${article.title}`
            });
            // 遍历段落
            Object.entries(article.paragraphs).forEach(([paraNum, paraContent]) => {
                this.flattenedRows.push({
                    type: 'paragraph',
                    paraNum,
                    paraContent
                });
            });
        });
    });
}

对应的HTML渲染代码简化为：

<table>
    <thead>
        <tr>
            <th></th>
            <th>Commission<br></th>
            <th>Parliament</th>
            <th>Council</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <template x-for="row in flattenedRows" :key="row.content || row.paraNum">
            <!-- 渲染章节/文章标题行 -->
            <tr x-if="row.type === 'chapter' || row.type === 'article'">
                <td colspan="5">
                    <h3 x-if="row.type === 'chapter'" x-text="row.content"></h3>
                    <h4 x-if="row.type === 'article'" x-text="row.content"></h4>
                </td>
            </tr>
            <!-- 渲染段落行 -->
            <tr x-if="row.type === 'paragraph'">
                <td x-text="row.paraNum"></td>
                <td x-text="row.paraContent"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </template>
    </tbody>
</table>

内容的提问来源于Stack Exchange，提问作者CerisePelican