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