动态数据表中行数的稳定、不变

Question

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

唯一可以分配行数的方法是，与原始数据数组相比，依赖于indexOf。但在我的例子中，问题在于，当我在表中对数据进行排序时，索引就会相应地中断。我希望它是稳定的，当你对数据排序时，它会重新计算。

在Vue有什么方法可以做到吗？从角度上看，用桌子要容易得多。有一个内置功能。

或者，您可能知道如何到达Vue保存的筛选或排序数据(数组)。

  <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>

提前感谢！

Answer 1

我设法让它工作的方式(感谢@elushnikova)是这样的：

        <v-data-table
          :headers="headers"
          :items="orders"
          class="elevation-2 mt-4"
          :loading="loading"
          loading-text="Loading... Please wait"
        >
          <template v-slot:item="{item, index}">
            <tr>
              <td>{{index + 1}}</td>
              <td>{{item.client_name}}</td>
              <td>{{item.client_id}}</td>
              <td>{{item.order_total}}</td>
            </tr>
          </template>
        </v-data-table>

它不会在分类时中断。但我相信过些时候当我有页码的时候我会有另一个问题的。但是，让我们在问题出现时解决它们:)

Answer 2

我在这个链接里找到了这个

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

对我来说很管用。

Answer 3

获得结果的最接近的方法是使用计算的属性，如codepen https://codepen.io/manojkmishra/pen/OJyYzVo中所示。

模板部分：

<div id="app">
<v-app>
  <h3>Orders</h3>
  <v-data-table
    :headers="headers"
    :items="ordersWithIndex"/>
</v-app>
</div>

剧本部分：

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
  headers: [{ text: 'Num', value: 'index' },
    { text: 'OrderName',  value: 'Name'   },
    {  text: 'OrderValue',   value: 'value'   }
  ],
  orders: [ {Name: 'order1', value: 100   },
            { Name: 'order2', value: 200 },
           { Name: 'order3', value: 300 },
           { Name: 'order4', value: 400 }
          ],
}
},
computed: {
ordersWithIndex() 
{  return this.orders.map(
    (items, index) => ({
      ...items,
      index: index + 1
    }))
}
}
})