Как скрыть столбец этой таблицы BootstrapVue во время загрузки страницы?

Этот вопрос является дополнительным вопросом к ответу, представленному здесь;

Как показать только показать/скрыть 2-й и 3-й столбцы этой таблицы bootstrapvue?

Код ниже покажет/скроет некоторые столбцы в таблице BootstrapVue.

new Vue({
  el: '#app',
  computed: {
    visibleFields() {
      return this.fields.filter(field => field.visible)
    },
    showFields() {
      return this.fields.filter(field => field.key.includes('first') || field.key.includes('last'))
    }
  },
  data() {
    return {
      items: [
        { id: 1, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 2, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 },
      ],
      fields: [
        { key: 'id', label: 'ID', visible: true },
        { key: 'first', label: 'First Name', visible: true },
        { key: 'last', label: 'Last Name', visible: true },
        { key: 'age', label: 'Age', visible: true },
      ]
    }
  }
})

<link href = "https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel = "stylesheet"/>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id='app'>
<b-checkbox
    :disabled = "visibleFields.length == 1 && field.visible"
    v-for = "field in showFields" 
    :key = "field.key" 
    v-model = "field.visible" 
    inline
  >
    {{ field.label }}
  </b-checkbox>
  <br /><br />
  <b-table :items = "items" :fields = "visibleFields" bordered>
  </b-table>
</div>

Таблица будет выглядеть так;

Как скрыть столбец этой таблицы BootstrapVue во время загрузки страницы?

Я хочу отключить флажок First Name только для того, чтобы при начальной загрузке страницы столбец First Name не отображался.

Что я сделал, так это изменил свойство fields visible, принадлежащее First Name, как показано ниже:

  fields: [
    { key: 'id', label: 'ID', visible: true },
    { key: 'first', label: 'First Name', visible: false }, //modify visible from true to false
    { key: 'last', label: 'Last Name', visible: true },
    { key: 'age', label: 'Age', visible: true },
  ]

Что происходит, так это то, что флажок First Name будет снят, но столбец First Name по-прежнему будет отображаться во время загрузки страницы, чего я не хочу. Если все работает так, как я хочу, то флажок First Name будет снят, а столбец First Name не появится после начальной загрузки страницы.

Я использую Vue v2.6 и BootstrapVue.

🤔 А знаете ли вы, что...
С JavaScript можно создавать расширения для различных платформ, таких как Adobe Acrobat и Microsoft Office.


1
32
1

Ответ:

Решено

Похоже, что в приведенном ниже фрагменте он работает так, как ожидалось. Все, что я сделал, это изменил видимость имен и фамилий на false.

new Vue({
  el: '#app',
  computed: {
    visibleFields() {
      return this.fields.filter(field => field.visible)
    },
    showFields() {
      return this.fields.filter(field => field.key.includes('first') || field.key.includes('last'))
    }
  },
  data() {
    return {
      items: [
        { id: 1, first: 'Mike', last: 'Kristensen', age: 16 },
        { id: 2, first: 'Peter', last: 'Madsen', age: 52 },
        { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 },
        { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 },
      ],
      fields: [
        { key: 'id', label: 'ID', visible: true },
        { key: 'first', label: 'First Name', visible: false },
        { key: 'last', label: 'Last Name', visible: false },
        { key: 'age', label: 'Age', visible: true },
      ]
    }
  }
})
<link href = "https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel = "stylesheet"/>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id='app'>
<b-checkbox
    :disabled = "visibleFields.length == 1 && field.visible"
    v-for = "field in showFields" 
    :key = "field.key" 
    v-model = "field.visible" 
    inline
  >
    {{ field.label }}
  </b-checkbox>
  <br /><br />
  <b-table :items = "items" :fields = "visibleFields" bordered>
  </b-table>
</div>