如何淡出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中定位行是一种类似黑客的解决方案，但是还没有能够尝试它。