如何删除 vue table 中的整列？

Question

我在 vue-table 中删除整列及其对应行时遇到问题。这是我的代码。

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

在这种情况下，当我在 <template> 中使用 v-if 时，它只会删除列的相应行。

这是上面代码的结果

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

我的问题是，我想像这样删除列本身。

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

#此致，

Answer 1

对于 vue-tables-2，我认为除了为不同的列集设置条件外别无选择，就像在计算中一样。例如：

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

Answer 2

我刚刚通过不使用 table 的方式找到了一个简单的解决方案：

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

我只是用了这个简单的 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>

在这里，我可以轻松地操作 remove/show 列及其数据。

如何删除 vue table 中的整列？

How to remove the whole column in vue table?

vue.js

vuejs2

vue-tables-2

谢谢！