Question

我需要使用此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>

Answer 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 道具来完全隐藏标题

如何合并Vuetify数据表和Vuetify列表？

1 个答案: