Vuetify数据表格筛选无结果时如何隐藏其所在的v-card组件

实现方案 #

你可以直接用Vuetify 2 v-data-table 自带的pagination事件实现需求，该事件会在筛选、排序、分页变化时自动触发，返回的参数中包含筛选后的总条目数totalItems，只需基于这个值判断是否展示卡片即可。

步骤1：新增状态存储变量

在组件的data中新增对象存储每个数据源对应表格的有效数据状态：

data() {
  return {
    // 你原有的其他数据定义
    tableHasData: {}
  }
}

步骤2：修改模板代码

给v-data-table添加pagination事件监听，同步当前表格的有效状态，同时给v-card添加显示判断：

<v-col v-for="datasource in datasources" :key="datasource.id" cols="6" >
  <v-card 
    v-if="tableHasData[datasource.id] ?? (datasource.config.data?.length || 0) > 0"
  >
    <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"
            @pagination="(pagObj) => tableHasData[datasource.id] = pagObj.totalItems > 0"
          >
          </v-data-table>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</v-col>

兼容说明

如果你的项目不支持ES6+的空值合并运算符??，可以把v-if的判断替换为普通三元表达式：

<v-card 
  v-if="typeof tableHasData[datasource.id] !== 'undefined' ? tableHasData[datasource.id] : (datasource.config.data?.length || 0) > 0"
>

内容的提问来源于stack exchange，提问作者Nick Slanec