首页 文章

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

提问于
浏览 次
0

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

  • 2

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

    您不必在 tr 标记上添加onclick侦听器，以切换绑定到星形图标的特定行项的值键 .

    所以在JS的方法里面我添加了toggle函数：

    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}}
    
      <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个 Headers 项，并评论了其余部分 . 您甚至可以通过在数据表中使用 hide-headers props来选择完全隐藏 Headers

    回复于

相关问题