Vuetify 数据表中稳定、不变的行数 [英] Stable, unchanged numeration of rows in Vuetify Data Table

问题描述

我目前正在学习 Vue 和 Vuetify，我遇到了在数据表中索引行的问题.

I'm learning Vue and Vuetify at the moment and I've faced the problem of indexing rows in data tables.

我可以分配行数的唯一方法是依靠 indexOf 与原始数据数组的比较.但就我而言，问题是当我对表中的数据进行排序时，索引会相应地中断.我想让它稳定，当你对数据进行排序时，它会重新计算.

The only way I can assign the number of a row is relying on indexOf comparing to the raw array of data. But the problem in my case is that when I sort data in the table index breaks accordingly. I would like to have it stable and when you sort data it recalculates.

有什么办法可以在Vue中实现吗?在 Angular 中，使用表格要容易得多.有一个内置功能

Is there any way to achieve it in Vue? In Angular it's much easier with tables. There is a build-in functionality

或者您可能知道如何访问 Vue 保存的过滤或排序的数据(数组).

Or maybe you know how to reach the filtered or sorted data (array) where Vue holds it.

  <v-data-table
          :headers="headers"
          :items="orders"
          class="elevation-2 mt-4"
          :loading="loading"
          loading-text="Loading... Please wait"
        >
          <template v-slot:item.index="{ item }">
           {{ orders.indexOf(item) + 1}}
          </template>
  </v-data-table>

提前致谢！

推荐答案

我在这个链接

 <template #item.index="{ item }">
{{ protocolData.indexOf(item) }}
 </template>

它对我有用.

这篇关于Vuetify 数据表中稳定、不变的行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！