时间戳

首页 > 解决方案 > Vuetify 数据表中的行数稳定不变

vue.js - Vuetify 数据表中的行数稳定不变

问题描述

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

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

有没有办法在Vue中实现它？在 Angular 中，使用表格要容易得多。有一个内置功能

或者，也许你知道如何访问 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>

提前致谢！

标签： vue.jsvuejs2vuetify.js

解决方案

我设法让它工作的方式（感谢@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>

它不会在排序时中断。但我相信稍后当我有分页时我会遇到另一个问题。但是，让我们在问题出现时解决问题:)

推荐阅读