Как удалить весь столбец в таблице VUE? - PullRequest
Новая
       37

Как удалить весь столбец в таблице VUE?

0 голосов
/ 08 ноября 2018

У меня проблема с удалением всего столбца и соответствующей ему строки в vue-таблице. Вот мой код. 

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

С уважением,

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Я только что нашел простое решение, не используя таблицу таким образом: 

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

Здесь я могу легко манипулировать, чтобы удалить / показать столбец и его данные.

Спасибо!

0 голосов
/ 08 ноября 2018

С vue-tables-2 я не думаю, что есть какой-то другой выбор, кроме как иметь условия для разных наборов столбцов, как в computed. Например: 

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