如何淡出 Vuetify v-data-table 行

Question

我的 v-data-table 行中有一个用于删除该行的按钮。我正在使用一个典型的拼接，它从数组中删除行并删除表行，只是弹出并且下面的行跳起来。

markApproved(index, invoice) {
  this.invoices.splice(index, 1);
}

我希望 Vuetify 淡出该行并将其余行平滑地向上滑动。如何使用 Vuetify 转换来做到这一点？

Answer 1

所以...我对您的问题没有完整的答案，但我希望通过在这里分享，我们可以找到一个完整的解决方案。

其他搜索我发现了如何使 v-data-table 行淡入淡出......但是......它只是最后一行。

使用标准的 vuetify 餐桌甜点：

      <v-data-table 
      :headers="headers" 
      :items="desserts">
        <template v-slot:body="{ items }">
          <tbody name="tr-fade" is="transition-group">
            <template>
              <tr
                v-for="(item, index) in items"
                :key="index"
                @click="desserts.splice(index,1)"
              >
                <td>{{item.name}}</td>
                <td>{{item.calories}}</td>
                <td>{{item.fat}}</td>
                <td>{{item.carbs}}</td>
                <td>{{item.protein}}</td>
                <td>{{item.iron}}</td>
              </tr>
            </template>
          </tbody>
        </template>
      </v-data-table>

还有一些标准的 css 过渡：

.tr-fade-enter-active,
.tr-fade-leave-active {
     transition: all 0.5s;
     }
.tr-fade-enter, .tr-fade-leave-to /* .fade-leave-active below version 2.1.8 */ 
{
  opacity: 0;
}

这将使动画在数据表中工作......但实际动画的行是最后一行。

演示： https://codesandbox.io/s/v-data-table-fade-row-uttwv

我认为可以通过使用 refs 直接在 DOM 中定位行来实现 hack-ish 解决方案，但还没有尝试过。