以Vuetify的v-data-table為例，實作條件性隱藏列的功能

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 欄位標題渲染的插槽。如果你不傳遞它（當條件為 false 時），Vuetify 將渲染預設的表示。

如果你想要有條件地隱藏（不渲染）某些列，請將你的表頭定義為 computed

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

    return headers
  }
}