Vue.js具有多个tbody的渲染表

基本上，我在一个数组中有五个对象，在每个对象中，都有一个名为

isLastRow

的布尔值属性。 我希望有一个带有多个

tbody

标记的表，当

项.isLastRow

为true时，下一个索引将使用tr创建新的

tbody

。显然，我当前的尝试只是迭代这些项并呈现五个

tbody

，预期结果将只有两个

tbody

。第一个

t车身

有两个

tr

，最后一个

t车身

有三个

tr

let items = [
    {
        id: 0,
        text: a,
        isLastRow: false,
    },
    {
        id: 1,
        text: a,
        isLastRow: true,
    },
    {
        id: 2,
        text: b,
        isLastRow: false,
    },
    {
        id: 3,
        text: b,
        isLastRow: false,
    },
    {
        id: 4,
        text: b,
        isLastRow: true,
    },
]



<template v-for="item in items">
  <tbody :key="item.id">
    <tr>
        <td>
            {{ item.text }}
        </td>
    </tr>
  </tbody>
</template> 

let项目=[
{
id:0，
案文：a，
伊斯拉夫罗：错，
},
{
id:1，
案文：a，
伊斯拉夫罗：是的，
},
{
id:2，
案文：b，
伊斯拉夫罗：错，
},
{
id:3，
案文：b，
伊斯拉夫罗：错，
},
{
id:4，
案文：b，
伊斯拉夫罗：是的，
},
]
{{item.text}

这就是我期望的结果

<table>
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
        </tr>
    </tbody>
        <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>b</td>
        </tr>
        <tr>
            <td>b</td>
        </tr>
        <tr>
            <td>b</td>
        </tr>
    </tbody>

</table> 

A.
A.
B
B
B

您必须使用computed属性将数据结构格式化为类似的格式

[
[
{id:0，text:a，isLastRow:false}，
{id:1，text:a，isLastRow:true}，
],
[
{id:2，text:b，isLastRow:false}，
{id:3，text:b，isLastRow:false}，
{id:4，text:b，isLastRow:true}，
],
]; 

e、 g

计算：{
getFormatedItems（）{
常量节=[[]]；
设指数=0；
this.items.forEach（item=>{
如果（项目最后一行）{
索引++；
节[索引]=[]；
}
节[索引]。推送（项目）；
});
},
},

然后你可以像这样编写你的模板

{{item.text}

这给了我一个关于eslint的错误。期望“v-bind:key”指令使用由“v-for”指令定义的变量。但是，嵌套数组的好处是。我将尝试修复eslint错误。如果找到它，v-for=“item in section”应该在tr中，而不是tbody中。无论如何，谢谢你的帮助