html - Veutify 动画 v-data-table
问题描述
<v-data-table :headers="headers" :items="rows" :items-per-page="30" class="elevation-1"> <template slot="rows" slot-scope="props"> <td>{{props.rows.username}}</td> <td>{{props.rows.password}}</td> </template> <template v-slot:item.view="{ item }"> <button v-on:click="viewUser(item.userId)" class="btn btn-outline-info">View Patient Data</button> </template> <template slot="rows" slot-scope="props"> <td>{{props.rows.email}}</td> </template> </v-data-table>
我如何使它每次出现新行时它都会淡入而不是“只是出现”?
谢谢
解决方案
添加新行时可以为 vuetify 数据表添加动画过渡
在这里工作的codepen:https ://codepen.io/chansv/full/GRROZXd
<div id="app">
<v-app id="inspire">
<v-card>
<v-btn @click="addRow" color="primary">click to add row</v-btn>
</v-card>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
hide-default-footer
>
<template v-slot:body="props">
<tbody name="fade" is="transition-group">
<template >
<tr class="row" v-for="(item, index) in props.items" :key="index">
<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>
</v-app>
</div>
Added this css
.fade-enter-active, .fade-leave-active {
transition: all 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.row {
display: table-row;
}
In script
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
}
],
}
},
methods: {
addRow() {
this.desserts.push({
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
});
}
}
})
推荐阅读
- swift - UserDefaults 观察者在没有硬输入参数后停止工作
- python - python openpyxl跳过excel的标题
- django - Django 用户配置文件 - 默认值取决于选择的用户
- vba - 在 VBA 中声明字典
- hadoop - 项目 hadoop-common 上的 (cmake-compile):make 失败,错误代码为 2
- php - 在过滤器中包含“NULL”值以及 Elastica 中的范围过滤器
- php - Laravel - Stripe.js 不显示卡片输入
- php - 如何使用 PHP 客户端库将数据存储区密钥转换为 URL 安全格式?
- mysql - MySQL union 返回混合列
- php - 表单总是提交获取方法