我怎样才能在vuetify中制作这个动态rowspan

Question

我正在尝试制作一个如下图所示的表格。

我知道我可以使用 vuetify 提供的

template

使用多次迭代来处理嵌套数据。它还在here进行了讨论。

我也可以使用不超过两个数据的普通数据来完成此操作，就像示例here

但是，我接收到的数据不是来自嵌套数据，也不是来自两个数据。我收到了超过五列且包含多个重复数据。

所以我试图弄清楚索引是什么以及我的表的行跨度应该使用什么长度。

有没有一种方法可以知道索引并删除重复的数据并将其作为一个或使用这种表制作行跨度？

这里是示例代码。

Answer 1

rowspan 位于第一行，因此我会计算第一个出现值的每个项目需要跨越多少行。结果看起来像这样：

const rows = [
  {val1: 'a', val1Rowspan: 3}, // first appearance of value, has rowspan
  {val1: 'a'}, // same value as above, no rowspan
  {val1: 'a'}, // same value as above, no rowspan
  {val1: 'b', val1Rowspan: 1},
  {val1: 'c', val1Rowspan: 2},
  {val1: 'c'},
]

这与 v-for 配合得很好：

<table>
  <tr v-for="row of rows">
    <td
      v-if="row.val1Rowspan"
      :rowspan="row.val1Rowspan"
    >{{ row.val1 }}</td>
  </tr>
</table>

const { createApp, ref } = Vue;

const App = { 
  template: `
    <table>
  <tr v-for="(row, index) of rows">
    <td>{{index}}</td>
    <td
      v-if="row.val1Rowspan"
      :rowspan="row.val1Rowspan"
    >{{ row.val1 }}</td>
  </tr>
</table>
  `,
  data() {
    return {
    rows:   [
      {val1: 'a', val1Rowspan: 3},
      {val1: 'a'},
      {val1: 'a'},
      {val1: 'b', val1Rowspan: 1},
      {val1: 'c', val1Rowspan: 2},
      {val1: 'c'},
    ]
    }  
  }
}
const app = createApp(App)
app.mount('#app')

td{
  border: 1px solid black;
  padding: 8px;
}

<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

使用嵌套循环计算行跨度非常容易，外循环设置当前值，内循环计算具有相同值的元素，然后将计数设置为行跨度，外循环跳转到下一个元素的第一个元素价值。您必须使用 rowspan 对每一列执行此操作。

这有意义吗？对你有用吗？