如何在 vue.js 中使用动态表行跨度？

Question

我想在示例照片中制作该表。

我想使用 rowspan 和制作的代码与行连接。但它不起作用，浏览器显示发生错误。首先，我的样本数据如下。

    export const dummyCssTest = [
    {
        id:"1",
        name:"a",
        sub:[
            {id:"1#1",name:"b"},
            {id:"1#2",name:"c"},
        ]
    },
    {
        id:"2",
        name:"d",
        sub:[
            {id:"2#1",name:"e"},
            {id:"2#2",name:"f"},
            {id:"2#3",name:"g"},
        ]
    }
]

如果 sub 的 id 包含与 main 的 id 相同的数字，例如“1”、“2”，在这种情况下，名称的行将与 sub 的数组长度的数字连接。所以我在下面编写了代码。我的代码是由 TypeScript 编写的，框架是 Nuxt.js 和 Vuetify.js。你能给我建议吗？

    <template>
  <div>
      <v-simple-table dense>
          <thead>
              <tr>
                <th class="blue lighten-5">name</th>
                <th class="blue lighten-5">sub_name</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="item in items" :key="item.id">
                  <td :rowspan="[sub.length]">{{item.name}}</td>
                  <td>{{item.sub[sub.length].name}}</td>
              </tr>
          </tbody>
      </v-simple-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue} from 'nuxt-property-decorator'
import { dummyCssTest } from "~/store/dummy";

@Component({})
export default class extends Vue{
    items:any=[]
    mounted(){
        this.items = dummyCssTest
    }
}
</script>
<style lang="scss" scoped>

</style

Answer 1

每个子项都需要一行，而不仅仅是每个项，这意味着 2 个循环而不是 1 个。循环中以及 的实现中还存在一些逻辑和语法错误v-simple-table。

循环应该如下所示：

<template v-for="item in items">
   <tr v-for="(subitem, iSub) in item.sub" :key="subitem.id">
      <td v-if="iSub === 0" :rowspan="item.sub.length">{{ item.name }}</td>
      <td>{{ subitem.name }}</td>
   </tr>
</template>

为每个子项创建一行，如果它是第一个子项，则创建一个 rowspan 单元格。这是一个完整的演示：

const dummyCssTest = [
    {
        id:"1",
        name:"a",
        sub:[
            {id:"1#1",name:"b"},
            {id:"1#2",name:"c"},
        ]
    },
    {
        id:"2",
        name:"d",
        sub:[
            {id:"2#1",name:"e"},
            {id:"2#2",name:"f"},
            {id:"2#3",name:"g"},
        ]
    }
];
    
new Vue({
  el: '#app',
  data() {
    return {
      items: dummyCssTest
    }
  }
});

.s {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.3.15/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-simple-table dense>
    <template v-slot:default>
      <thead>
          <tr>
            <th class="blue lighten-5">name</th>
            <th class="blue lighten-5">sub_name</th>
          </tr>
      </thead>
      <tbody>
          <template v-for="item in items">
            <tr v-for="(subitem, iSub) in item.sub" :key="subitem.id">
              <td v-if="iSub === 0" :rowspan="item.sub.length" class="s">{{ item.name }}</td>
              <td>{{ subitem.name }}</td>
            </tr>
          </template>
      </tbody>
    </template>
  </v-simple-table>
</div>