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

Posted 2023-02-23

【中文标题】有条件地隐藏 v-data-table 中的列（Vuetify）

【英文标题】：Conditionally hide column in 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

【参考方案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