VUETIFY V-DATA TABLE，根据条件隐藏表头

Question

如何隐藏和显示 vuetify 表头？如果对象包含特定服务，我需要显示或隐藏标头。

<v-data-table
        style="position: relative; z-index: 0"
        class="pa-0"
        dense
        disable-pagination
        disable-sort
        fixed-header
        :headers="headers"
        :height="height"
        hide-default-footer
        :items="locations"
        item-key="id"
        :loading="loadingDataTable"
        :ref="'datatable'"
        @click:row="highlightRow"
        @current-items="currentItems"
        calculate-widths
>
<template v-slot:item.headerHidden="{ item }">
          <span class="secondary--text text-lg-caption text-xl-body-2">
            {{ value }}
          </span>
</template>

</v-data-table>

data() {
return {
headersMap: {
headerHidden: {
          text: 'Hello
          ),
          align: 'center',
          value: 'headerHidden',
          class: 'secondary--text ml-4'
        },
}
}
}

我必须隐藏该标头，取决于services3是否存在，如果services3不存在则隐藏，如果不存在则显示，对象的结构是：

obj: {
services: {
services1: {
...
},
services2: {
...
},
services3: {
...
},
}
}

我尝试使用计算属性，但无法解决它，还创建了一个观察器，但我无法解决它。谢谢

Answer 1

要根据

services3

对象中是否存在

obj

有条件地显示或隐藏 Vuetify 表头，您可以使用计算属性动态绑定

v-data-table

标头。此计算属性检查是否存在

services3

并相应地调整标题。以下是如何实现此目标的示例：

<template>
  <v-data-table
    ...
    :headers="dynamicHeaders"
  >
    ...
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headersMap: {
        headerHidden: {
          text: 'Hello',
          align: 'center',
          value: 'headerHidden',
          class: 'secondary--text ml-4'
        }
        // Add other headers here...
      },
      obj: {
        services: {
          services1: { /* ... */ },
          services2: { /* ... */ },
          services3: { /* ... */ }
        }
      }
    };
  },
  computed: {
    dynamicHeaders() {
      const hasServices3 = 'services3' in this.obj.services;
      // Create a copy of headers, excluding the header you want to conditionally show/hide
      const filteredHeaders = Object.keys(this.headersMap)
        .filter(key => key !== 'headerHidden')
        .map(key => this.headersMap[key]);

      // Add the 'headerHidden' only if services3 exists
      if (hasServices3) {
        filteredHeaders.push(this.headersMap.headerHidden);
      }

      return filteredHeaders;
    }
  }
};
</script>

此示例使用名为

dynamicHeaders

的计算属性。它检查

services3

中是否存在

obj.services

。基于此条件，如果

services3

不存在，它会构造一个新的 headers 数组，不包括 'headerHidden' 标头；如果

services3

存在，则包含它。然后，将此计算属性用作

:headers

中

v-data-table

的值。