有条件地隐藏 v-data-table 中的列（Vuetify）答案

【问题标题】：Conditionally hide column in v-data-table (Vuetify)有条件地隐藏 v-data-table 中的列（Vuetify）
【发布时间】：2021-10-18 02:58:51
【问题描述】：

我有一个带有actions 列的v-data-table，并且我只想在用户具有某些权限时才显示此列。我正在使用 mixin 来检查权限

我试过这样做，但没有用：

<template v-slot:[`header.actions`]="{ header }" v-if="hasPermission('update center')">
  {{ header.text }}
</template>

这就是我在组件文件中使用 mixin 的方式：

import BaseLayout from "../layouts/Base/Base.vue";
import hasPermission from "../../../mixins/hasPermissions";
        
export default {
  mixins: [hasPermission],
...
}

结果：[1]: https://i.stack.imgur.com/aVSgJ.png

【问题讨论】：

标签： vue.js datatable vue-component vuetify.js

【解决方案1】：

header.actions 是一个插槽，用于覆盖 actions 列标题的呈现。如果您不传递它（当条件为false 时），Vuetify 将呈现默认表示。

如果您想有条件地隐藏（不呈现）某些列，请将您的标题设为computed

computed: {
  headers() {
    const headers = [
      // other headers definitions
    ]
    if(this.hasPermission('update center')) {
      headers.push({
        // actions header definition
      })
    }

    return headers
  }
}

【讨论】：