在v-data-table中维护行索引

Question

我有一个v-data-table，其中包含这样的项

<v-data-table :items="items" ...>
 <template slot="items" slot-scope="props">
   <td>{{props.index}}</td>
   <td>{{props.name}}</td>
  </template>
</v-data-table>

有超过20个项目，我正在尝试维护行索引。当我使用props.index时，它总是显示0-5，即使我改变了分页。即使我更改了分页，如何维护增量索引？

Answer 1

通常，您将拥有pagination.sync to local data属性，然后您可以计算当前索引为

(pagination.page - 1)* pagination.rowsPerPage + props.index

您的分页对象：

{
  descending: boolean
  page: number
  rowsPerPage: number // -1 for All
  sortBy: string
  totalItems: number
}

Demo on codepen