Take Vuetify's v-data-table as an example to implement the function of conditionally hiding columns

Question

I have a table with columns v-data-table and actions and I want to display this column only if the user has certain permissions. I'm using a mixin to check permissions.

I tried the following without success:

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

This is how I use the mixin in the component file:

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

Result: [1]: https://i.stack.imgur.com/aVSgJ.png

Answer 1

header.actions is a slot used to override actions column header rendering. If you don't pass it (when the condition is false), Vuetify will render the default representation.

If you want to conditionally hide (not render) certain columns, define your table header as computed

computed: {
  headers() {
    const headers = [
      // 其他表头定义
    ]
    if(this.hasPermission('update center')) {
      headers.push({
        // actions 表头定义
      })
    }

    return headers
  }
}