如何删除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'}
        ],
   }
}

这是原始表：

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

在这种情况下，当我在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，我认为别无选择，只有对不同的列集设置条件，例如在compute中。例如：

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

我只是通过不使用表来找到一个简单的解决方案：

.page { 
  position: relative;
  width: 100px; 
  height: 200px;
}

.content {
   width: 100%;
}

.wrapper {
  position: relative;
  width: 100%; 
  height: 100%; 
  padding: 0; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  border: 1px solid #ddd;
}

.page::after { 
  content:'';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
    display: block;
    width: 5px;
}
.wrapper::-webkit-scrollbar-track {
    background: transparent;
}
    
.wrapper::-webkit-scrollbar-thumb {
    background-color: red;
    border-right: none;
    border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px; 
}

.wrapper::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}

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

<div class="page">
<div class="wrapper">
<div class="content">
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
</div>
</div>
</div>

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

谢谢！