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

I am trying to hide the action for non-admin users. I am using a data-table to do it. Here is my code:

<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>

Here is the header in my data:

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" },
]

CodePudding user response：

It should work like this:

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" },
   ]
  }
},

and in mounted()

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