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中定位行来实现黑客式解决方案，但目前还无法尝试。

如何淡出Vuetify v-data-table行

1 个答案: