如何结合 Vuetify 数据表和 Vuetify 列表？答案

【问题标题】：How to combine a Vuetify data table and Vuetify list?如何结合 Vuetify 数据表和 Vuetify 列表？
【发布时间】：2018-06-27 19:06:26
【问题描述】：

我需要使用这个Vuetify data table，但要使用这个Vuetify list 的布局。该列表应该是可搜索的，并且每个条目都是一个按钮。

如何做到这一点？

这是我目前的结果：https://codepen.io/anon/pen/ZRqwYG

HTML：

<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>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

演示：https://codepen.io/anon/pen/ZRwLgX?editors=0010

您不需要使用 Vuetify List 来实现。您可以使用 Typography 类根据您的要求对 Vuetify 数据表行中的内容进行样式设置。我在 tr 标记上添加了 onclick 监听器，它切换绑定到星形图标的特定行项的值键。

所以在你的 JS 方法中，我添加了切换功能：

toggle(name) {
  let index = this.desserts.findIndex(e => e.name == name);
  if (index > -1) {
    this.desserts[index].value = !this.desserts[index].value;
  }
}

在您的数据表模板中，每一行项目如下：

<tr style="cursor: pointer" @click="toggle(props.item.name)">
  <td>
    <div class="body-2">
      {{props.item.name}}
    </div>
    <div class="">
      {{props.item.iron}}
    </div>
    <div class="">
      {{props.item.calories}}
    </div>
  </td>
  <td>
    <div class="body-2" style="textAlign: center">
      {{props.item.fat}}<br/>
      <v-icon v-if="props.item.value" color="yellow darken-2">star</v-icon>
      <v-icon v-else color="grey lighten-1">star_border</v-icon>
    </div>
  </td>
</tr>

我只使用了 2 个标题项，并对其余项进行了评论。您甚至可以选择通过在数据表中使用 hide-headers 道具来完全隐藏标题

【讨论】：