如果没有结果，可以隐藏 Vuetify 数据表吗？答案

【问题标题】：Can a Vuetify data table be hidden if it has no results?如果没有结果，可以隐藏 Vuetify 数据表吗？
【发布时间】：2023-03-29 07:34:02
【问题描述】：

我在带有过滤器的卡片中有一个 Vuetify 数据表，如果过滤器没有响应（意味着数据表没有结果），我希望整个卡片消失。我正在使用this method 进行过滤。

卡片是在v-for中创建的

      <v-col v-for="datasource in datasources" :key="datasource.id" cols="6" >
        <v-card>
          <v-card-title>
           ...
          </v-card-title>
          <v-card-subtitle>{{ datasource.name }}</v-card-subtitle>
          <v-card-text>
            <v-row>
              <v-col>
                <v-data-table
                  dense
                  :headers="datasource.config.headers"
                  :items="datasource.config.data"
                >
                </v-data-table>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

理想情况下，我可以只包含<v-card v-if='SOMETHING EMITTED WHEN TABLE IS EMPTY'>，但我不确定如何在过滤所有内容时发出数据表。

【问题讨论】：

你的意思是datasources > 0 和用户或者它曾经发生过什么下降到0？如果是这样v-if="datasources > 0"????
感谢您的回复。我希望这很容易，但数据源不是被过滤的内容，而是每个数据源中的数据。此外，过滤器不会更改数据源对象。
那么computed 值或watch 在这种情况下可能会对您有所帮助。

标签： vue.js vuetify.js

【解决方案1】：

我想出了一个解决方案。它当然不是最干净的，但它为我完成了工作。

我创建了以下方法。它完全独立于数据源过滤器，只使用我用于数据源过滤器（org 对象）的相同输入。

methods: {
    hasAnyValues(org, datasource) {
      if(org == null){
        return true;
      } else if (this.checkForOrgs(org, datasource)) {
        return true
      } else {
        return false
      }
    },
    checkForOrgs(org, datasource){
      for(let i = 0; i < datasource.config.data.length; i++){
        if(parseInt(datasource.config.data[i].client_id) == org.id){
          return true;
        } else {
          continue;
        }
      }
      return false;
    }
}

然后我在v-if 语句中使用了这个方法，在该语句中我在模板中创建了卡片：

<v-col v-for="datasource in editedDatasources" :key="datasource.id" cols="6" >
        <v-card elevation="5" v-if="hasAnyValues(selectedOrg, datasource)">

【讨论】：

【解决方案2】：

         <template slot="no-results">
            <div class="no-data-wrapper">
                <div class="pa-15">
                    <img src="../../../assets/images/search-icon.svg" width="40px" height="42px" alt="">

                    <h3> No matching result </h3>
                    <p>
                        Sorry! We could not find any invoice that matches<br>
                        your search term.
                    </p>

                    <div class="mt-4">
                        <v-btn color="primary" outlined class="add-supplier">
                            Try Different Search
                        </v-btn>
                    </div>
                </div>
            </div>
        </template>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。