Vuetify 数据表移动断点

Question

我有这个vuetify数据表，我想在移动调整大小时保持相同的行为。 所以我只想在同一行上显示所有数据。

https://codepen.io/sebastiancz/pen/JjoVRVg?editable=true&editors=101

<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</v-app>
</div>

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' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37
}
],
}
},
})

Answer 1

您可以使用mobile-breakpoint道具来配置它。0的值似乎禁用了不同的移动呈现。

<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
mobile-breakpoint="0"
></v-data-table>