<v-data-table
:headers="headers"
:items="desserts"
:search="search"
hide-actions
:pagination.sync="pagination"
>
在数据表之后添加以下内容:
最初的回答:
<v-layout row justify-center>
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
<v-btn class="test">test</v-btn>
</v-layout>
在这里查看更多内容。
这里有一个Codepen的实例。
prev-icon
和 next-icon
及其颜色来更改图标。在此处查看更多信息:https://vuetifyjs.com/en/components/paginations。 - DjSh<v-data-table
style="position: relative;">
<template slot="footer">
<v-btn style="position: absolute; left: 10px; bottom: 10px;">
test
</v-btn>
</template>
</v-data-table>
使用CSS的最简单方法:
在您的数据表中使用模板:
<template v-slot:actions-prepend>
<v-btn>
Click me !
</v-btn>
</template>
.my-grid .v-datatable__actions > div:first-child {
flex: 1;
}
工作代码片段:
new Vue({
el: '#app',
methods: {
onClick() { this.dark = !this.dark; }
},
data: {
dark: true,
headers: [{
text: 'Dessert (100g serving)',
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: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
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%'
}
]
}
})
.my-grid .v-datatable__actions > div:first-child {
flex: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>
<div id="app">
<v-app :dark="dark">
<v-content>
<v-data-table :headers="headers" :items="desserts" class="my-grid">
<template v-slot:items="{item}">
<tr>
<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>
<template v-slot:actions-prepend>
<v-btn @click="onClick">
Switch mode
</v-btn>
</template>
</v-data-table>
</v-content>
</v-app>
</div>
actions-prepend
插槽。 - totalhack