VUETIFY DataTable - 如何在 table header 上使用 v-if 对用户隐藏特定列

Question

我正在尝试隐藏 non-admin 用户的操作。我正在使用 data-table 来做到这一点。这是我的代码：

<v-data-table
  dense
  :headers="stampedDocumentsHeaders"
  :items="filterCutOffAllDocs"
  :search="searchAllDoc"
  loading-text="Loading... Please wait">
    <template v-slot:body="{items}">
      <tbody>
        <tr v-if="filterCutOffAllDocs.length == 0">
          <td colspan="8" style="text-align:center;color:#808080;font-size:18px;padding:10px">NO DATA TO SHOW</td>
        </tr>
        <tr v-else v-for="(item, i) in items" :key="i">
          <td style="text-align:center">{{item.document_control_code}}</td>
          <td style="text-align:center">{{item.document_title}}</td>
          <td style="text-align:center">{{item.request_type}}</td>
          <td style="text-align:center">{{item.nature_of_request}}</td>
          <td style="text-align:center">{{item.status}}</td>
          <td style="text-align:center">{{item.s_date}}</td>
          <td style="text-align:center">{{item.StamperName}}</td>
        </tr>
      </tbody>
    </template>
  </v-data-table>

这是我数据中的 header：

headersData: [
  { text: "Code", value: "document_control_code" },
  { text: "Request Type", value:  "request_type"} ,
  { text: "Title", value: "document_title" },
  { text: "department", value: "department" },
  { text: "Request Date", value: "request_date" },
  { text: "Due Date", value: "due_date" },
  { text: "Action", value: "action" },
]

Answer 1

它应该像这样工作：

data() {
  return {
    headersData: [
      { text: "Code", value: "document_control_code" },
      { text: "Request Type", value:  "request_type"} ,
      { text: "Title", value: "document_title" },
      { text: "department", value: "department" },
      { text: "Request Date", value: "request_date" },
      { text: "Due Date", value: "due_date" },
   ]
  }
},

并在 mounted()

mounted() {
  if(admin) {
    this.headersData.push({ text: "Action", value: "action" });
  }
}

VUETIFY DataTable - 如何在 table header 上使用 v-if 对用户隐藏特定列

VUETIFY DataTable - How to use v-if on table header to hide certain column from users

vue.js

vuetify.js

vuetify-datatable