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

Question

我有一个 v-data-table 和 actions 列，我只想在用户有一些权限时显示此列。我正在使用 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

Answer 1

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

如果您想有条件地隐藏（不呈现）特定列，请将您的 header 设置为 computed

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

    return headers
  }
}

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

Conditionally hide column in v-data-table (Vuetify)

datatable

vue.js

vue-component

vuetify.js