Как переключать отдельные детали строки с помощью Bootstrap-vue - PullRequest
Новая
       7

Как переключать отдельные детали строки с помощью Bootstrap-vue

0 голосов
/ 01 октября 2019

Я использую bootstrap-vue таблицу для проекта и застрял на проблеме без документации.

Как я могу переключать детали 1 строки за раз?

Здесь приведен полный пример таблицы с данными на здесь

1 Ответ

1 голос
/ 01 октября 2019

Я использую v-model и устанавливаю его в другой массив, так как v-model на b-table возвращает отображаемые в данный момент элементы после фильтрации и разбиения на страницы. Повышение производительности, поскольку вы ограничиваете количество предметов, которые вы должны закрыть, чтобы закрыть. 

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        items: [
          { id: 1, name: 'Povl', age: 26, gender: 'Male', secret: 'I love kittens' },
          { id: 2, name: 'Charlie', age: 9, gender: 'Female', secret: 'I love cupcakes' },
          { id: 3, name: 'Max', age: 71, gender: 'Male', secret: 'I love puppies' }
        ],
        currentItems: [],
        fields: [
          { key: 'name' }, { key: 'age' }, { key: 'gender' }, { key: 'actions' }
        ]
      }
    },
    methods: {
      //finds a specific item based on the provided ID and toggles details on that item
      toggleDetails(row) {
        if(row._showDetails){
          this.$set(row, '_showDetails', false)
        }else{
          this.currentItems.forEach(item => {
            this.$set(item, '_showDetails', false)
          })

          this.$nextTick(() => {
            this.$set(row, '_showDetails', true)
          })
        }
      }
    }
  })
}
<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-container class='pt-3'>
    <b-table :items="items" :fields="fields" v-model="currentItems" bordered fixed>
      <template v-slot:cell(actions)="{ detailsShowing, item }" >
        <!-- Use the built in method from the scoped data to toggle the row details -->
        <b-btn @click="toggleDetails(item)">{{ detailsShowing ? 'Hide' : 'Show'}} secret</b-btn>
      </template>
      <template v-slot:row-details="{ item }">
        <b-card>
          {{ item.secret }}
        </b-card>
      </template>
    </b-table>
  </b-container>
</div>
...