vue.js - 如何删除vue表中的整列？

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

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

这是上面代码的结果

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

我刚刚通过不以这种方式使用表格找到了一个简单的解决方案：

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

我只是使用了这个简单的 html 表：

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

在这里，我可以轻松地操作以删除/显示列及其数据。

谢谢！