Search code examples
vue.jsvuejs2vue-tables-2

How to remove the whole column in vue table?


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,


Solution

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

    Thanks!