Javascript 如何组合Vuetify数据表和Vuetify列表?
我需要用这个,但是用这个的布局。列表应该是可搜索的,每个条目都有一个按钮 怎么做 以下是我目前的结果: HTML:Javascript 如何组合Vuetify数据表和Vuetify列表?,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我需要用这个,但是用这个的布局。列表应该是可搜索的,每个条目都有一个按钮 怎么做 以下是我目前的结果: HTML: Vuetify数据表+Vuetify列表 {{props.item.name} {{props.item.iron} {{props.item.carries} {{props.item.fat} 星条旗 您对“{search}}”的搜索未找到任何结果。 演示: 您不需要使用Vuetify列表来实现这一点。您可以根据需要使用排版类设置Vuetify数据表行中的内容样式。我在tr标
Vuetify数据表+Vuetify列表
{{props.item.name}
{{props.item.iron}
{{props.item.carries}
{{props.item.fat}
星条旗
您对“{search}}”的搜索未找到任何结果。
演示:
您不需要使用Vuetify列表来实现这一点。您可以根据需要使用排版类设置Vuetify数据表行中的内容样式。我在tr标记上添加了onclick listener,用于切换绑定到星形图标的特定行项目的值键
因此,在JS中的方法中,我添加了切换函数:
切换(名称){
让index=this.desserts.findIndex(e=>e.name==name);
如果(索引>-1){
this.desserts[index].value=!this.desserts[index].value;
}
}
演示:
您不需要使用Vuetify列表来实现这一点。您可以根据需要使用排版类设置Vuetify数据表行中的内容样式。我在tr标记上添加了onclick listener,用于切换绑定到星形图标的特定行项目的值键
因此,在JS中的方法中,我添加了切换函数:
切换(名称){
让index=this.desserts.findIndex(e=>e.name==name);
如果(索引>-1){
this.desserts[index].value=!this.desserts[index].value;
}
}
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title>
Vuetify Data-Table + Vuetify List
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
>
<template slot="items" slot-scope="props">
<v-list-tile-content>
<v-list-tile-title>{{ props.item.name }}</v-list-tile-title>
<v-list-tile-sub-title class="text--primary">{{ props.item.iron }}</v-list-tile-sub-title>
<v-list-tile-sub-title>{{ props.item.calories }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-list-tile-action-text>{{ props.item.fat }}</v-list-tile-action-text>
<v-icon color="grey lighten-1">star_border</v-icon>
</v-list-tile-action>
</>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "{{ search }}" found no results.
</v-alert>
</v-data-table>
</v-card>
</v-app>
</div>