时间戳

首页 > 解决方案 > 使用按钮（过滤器）在 v-data-table 中切换子组件

vue.js - 使用按钮（过滤器）在 v-data-table 中切换子组件

问题描述

我有一个带有 2 个按钮的父组件，我想将它们用作过滤器。子组件在 v-data-table 中被调用。

扫描网格（父）：

    <template>
      <v-card class="ma-5" v-else>
        <v-flex row xs12 class="pa-3 ml-3">
          <div class="mr-3 mt-2">
            <h3>Regrouper par :</h3>
          </div>
          <div>
            <v-btn-toggle color="success" v-model="groupBy">
              <v-btn
                text
                value="barCode"
                class="lowerCase"
                v-ripple="{ class: 'success--text' }"
              >
                Code barre
              </v-btn>
              <v-btn
                text
                value="productDef"
                class="lowerCase"
                v-ripple="{ class: 'success--text' }"
              >
                Définition de produit
              </v-btn>
            </v-btn-toggle>
          </div>
        </v-flex>
        <v-card-text>
          <v-layout align-center>
            <v-data-table
              :headers="headers"
              :items="items"
              item-key="StorageName"
              show-expand
              single-expand
              :expanded="expanded"
              hide-default-footer
              @click:row="clickedRow"
            >
              <template v-slot:expanded-item="{ item }">
                <td :colspan="12">
                  <ScanGridCode :item="item"></ScanGridCode>
                </td>
              </template>
              <template v-slot:expanded-item="{ item }">
                <td :colspan="12">
                  <ScanGridDef :item="item"></ScanGridDef>
                </td>
              </template>
            </v-data-table>
          </v-layout>
        </v-card-text>
      </v-card>
    </template>

我想使用按钮切换的子组件在 v-data-table 的模板中称为 ScanGridCode 和 ScanGridDef。我试图在网上找到过滤按钮的例子，但找不到任何我想做的事情。

我正在使用 Vue 2.6.10 和 Vuetify 2.1.7

标签： vue.js

解决方案

您几乎已经完成了，因为您已经使用 v-model="groupBy" 设置了 v-btn-toggle。您仍然需要添加v-if到每个模板，例如：

<template v-if="groupBy=='barCode'" v-slot:expanded-item="{ item }">

推荐阅读