How to remove the whole column in vue table?

Question

I have a problem in removing the whole column and its corresponding row in vue-table. Here is my code.

<b-table :fields="fields" :items="data">

    <template slot="action" slot-scope="data" v-if="authorize = 1">

    </template>

</b-table>



export default{
    data(){
       authorize: 0,
       data: [],
       fields: [
          {key: 'id', label: '#'},
          {key: 'name', label: 'Name'},
          {key: 'action', label: 'Action'}
        ],
   }
}

In this case, When I use v-if inside the <template> it only removes the corresponding row of the column.

This is the result of the code above

| # | Name                    | Action |
----------------------------------------
| 1 | John Doe                |        |
| 2 | Chicharon Ni Mang Juan  |        |
| 3 | Lumanog                 |        |

My Problem is, I want to remove the column itself like this.

| # | Name                   |
------------------------------
| 1 | John Doe               | 
| 2 | Chicharon Ni Mang Juan | 
| 3 | Lumanog                |

#Regards,

you should use `v-for` for easier manipulation of html elements. — Kapitan Teemo, Nov 08 '18 at 10:32

score 2 · Answer 1 · answered Nov 08 '18 at 11:10

With vue-tables-2 I don't think there's any other choice but to have conditional for different column sets, like in computed. For example:

computed: {
 fields: function() {
  let fields = [{key: 'id', label: '#'}, {key: 'name', label: 'Name'}]
  if (this.authorize === 1) {
    fields.push({key: 'action', label: 'Action'})
  }
  return fields
 }
}

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I just found a simple solution by not using the table on this way:

<b-table :fields="fields" :items="data">
     <template slot="action" slot-scope="data" v-if="authorize = 1">
      </template>
</b-table>

I just used this simple html table:

<table class="table" style="width:100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th v-if="authorize == 1">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="user in data">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td v-if="authorize == 1">
                 <button variant="primary">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

Here, I can easily manipulate to remove/show the column and its data.

How to remove the whole column in vue table?

2 Answers2

Thanks!