我有一个Vuetify数据表,它嵌套在v-card中,这样我就可以在数据表上启用内联搜索,但这会导致数据表缩小,只占整个容器的一小部分,而当它没有嵌套在v-card中时,它会填充整个容器.
我已经在codepen上复制了一个最小的例子
然而,主要的关注点在这里.
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Candy Bars</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<template>
<v-card>
<v-card-title>
Routes
<v-spacer></v-spacer>
<v-text-field append-icon="search" label="Search" single-line hide-details v-model="search"></v-text-field>
</v-card-title>
<v-data-table v-bind:headers="headers" :items="routes" :search="search" hide-actions class="elevation-1">
<template slot="items" slot-scope="props">
<td><router-link :to="{ name: 'route', params: {id: props.item.id}}">{{ props.item.name }}</router-link></td>
<td>{{ props.item.agency }}</td>
</template>
</v-data-table>
</v-card>
</template>
</v-container>
</v-content>
<v-footer app fixed>
<span>© 2017</span>
</v-footer>
</v-app>