基于vue v-for 多层循环嵌套获取行数的方法

要在Vue的模板中多层循环嵌套并获取每层循环的行数，可以使用如下的方法：

<template>
  <div>
    <div v-for="(group, index) in groups" :key="index">
      <div v-for="(item, i) in group.items" :key="i">
        {{ getRowNum(index, i) }}行 - {{ item.name }}
      </div>
    </div>
  </div>
</template>

在这个示例中，我们使用了两层循环，外层循环遍历一个名为groups的数组，内层循环遍历每个组中的一个名为items的数组。对于每个item，我们将显示一个字符串，其中包含当前item的名称和它所在的行数。

为了获取每个条目所在的行数，我们使用了一个叫做getRowNum的计算属性。这个计算属性需要两个参数：每个item所在的组的索引和该item在它所在items数组中的索引。它会遍历groups数组，累加之前的每个组中的items数组的长度，然后加上当前组中items数组slice出来的部分长度再加上当前循环到的items数组中的索引。

下面是getRowNum计算属性的代码：

computed: {
  getRowNum () {
    return function (groupIndex, itemIndex) {
      let rowNum = 0
      for (let i = 0; i < groupIndex; i++) {
        rowNum += this.groups[i].items.length
      }
      rowNum += itemIndex + 1
      return rowNum
    }
  }
}

我们在计算属性中定义了一个匿名函数，然后返回了它。这个匿名函数接受两个参数groupIndex和itemIndex，并返回当前条目所在的行数。

为了计算行数，我们需要遍历groups数组，累加之前的每个组中的items数组的长度，然后加上当前组中items数组slice出来的部分长度再加上当前循环到的items数组中的索引，这样我们就可以得出当前条目的行数了。最后将行数返回即可。

下面是一个完整的示例：

<template>
  <div>
    <div v-for="(group, index) in groups" :key="index">
      <h2>{{ group.name }}</h2>
      <div v-for="(item, i) in group.items" :key="i">
        {{ getRowNum(index, i) }}行 - {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      groups: [
        {
          name: 'Group 1',
          items: [
            { name: 'Item 1' },
            { name: 'Item 2' },
            { name: 'Item 3' },
          ]
        },
        {
          name: 'Group 2',
          items: [
            { name: 'Item 1' },
            { name: 'Item 2' },
            { name: 'Item 3' },
          ]
        },
        {
          name: 'Group 3',
          items: [
            { name: 'Item 1' },
            { name: 'Item 2' },
            { name: 'Item 3' },
          ]
        }
      ]
    }
  },
  computed: {
    getRowNum () {
      return function (groupIndex, itemIndex) {
        let rowNum = 0
        for (let i = 0; i < groupIndex; i++) {
          rowNum += this.groups[i].items.length
        }
        rowNum += itemIndex + 1
        return rowNum
      }
    }
  }
}
</script>

上面的示例中展示了一个简单的多层循环嵌套的例子。实际业务中多层循环嵌套的场景比较常见，使用这个方法可以轻松计算每个条目的行数，并在视图中展示出来。