Как динамически загружать данные строки b-таблицы Bootstrap-vue с помощью _showDetails?

У меня есть "b-table" bootstrap-vue, используемый на моей странице Vue. В каждой строке есть кнопка «просмотреть подробности», которая показывает дополнительную информацию о выбранной строке. Я искал примеры, которые могут отправлять запрос на бэкэнд, когда пользователь щелкает для просмотра деталей, который расширяет строку и показывает детали, полученные из бэкэнда. Параметр «_showDetails» из таблицы bootstrap-vue кажется ограниченным, поскольку все примеры используют данные, которые уже были загружены вместе с основной таблицей, использование этого способа приведет к перегрузке страницы, поскольку мои данные для каждой строки слишком велики.

Есть ли какие-нибудь примеры или даже другие библиотеки, поддерживающие такую ​​функциональность?


javascript asynchronous datatable vuejs2 bootstrap-vue
person Balaram26    schedule 04.03.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете сделать это с bootstrap-vue без проблем.

Создайте метод, который вызывается, когда вы нажимаете кнопку «просмотреть подробности», этот метод вызовет ваш бэкэнд и вставит данные в ваш элемент. После получения данных вы устанавливаете _showDetails в значение true для элемента, что откроет подробные сведения.

Вы также можете немедленно открыть его и показать сообщение о загрузке, пока данные извлекаются, это зависит от вас.

new Vue({
  el: '#app',
  created() {
    // Get initial data
    fetch('https://reqres.in/api/users')
      .then(response => response.json())
      .then(json =>
        /* Map and use only some of the data for the example */
        this.items = json.data
        .map(user => {
          return {
            id: user.id,
            first_name: user.first_name,
            last_name: user.last_name
          }
        }))
  },
  data() {
    return {
      items: [],
      fields: ['id', 'first_name', 'last_name', {
        key: 'actions',
        label: ''
      }]
    }
  },
  methods: {
    toggleDetails(item) {
      if (item._showDetails) { // if details are open, close them
        item._showDetails = false
      } else if (item.details) { // if details already exists, show the details
        this.$set(item, '_showDetails', true)
      } else {
        fetch(`https://reqres.in/api/users/${item.id}`)
          .then(response => response.json())
          .then(json => {
            const user = json.data;
            item.details = {
              email: user.email,
              avatar: user.avatar
            }
            this.$set(item, '_showDetails', true)
          })
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

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

<div id="app">
  <b-container>
    <b-table :items="items" :fields="fields">
      <template v-slot:cell(actions)="{ item }">
        <b-btn @click="toggleDetails(item)">
          Show details
        </b-btn>
      </template>
      <template v-slot:row-details="{ item : { details: { email, avatar }}}">
        <b-card>
          <b-img :src="avatar" fluid></b-img>
          {{ email }}
        </b-card>
      </template>
    </b-table>
  </b-container>
</div>

person Hiws    schedule 04.03.2020
comment
Спасибо за ответ, все сработало отлично. За исключением того, что мне нужно было добавить еще одну вещь в мою функцию табличных данных. Примечание. При манипулировании свойством _showDetails непосредственно с данными элемента (т. Е. Не через ссылку на функцию toggleDetails), _showDetails должным образом должен существовать в данных элементов для надлежащего реактивного обнаружения изменений его значения. Узнайте больше об ограничениях реактивности Vue. - person Balaram26; 05.03.2020
comment
Вы также можете использовать методы Vue.set(...) или this.$set(...), чтобы убедиться, что для свойства _showDetails включена реактивность. vuejs.org/v2/api/#vm-set - person Troy Morehouse; 05.03.2020
comment
@ Balaram26 Как упоминал Трой, если вы используете this.$set(...), как я в отрывке, _showDetails не обязательно должен существовать в данных таблицы заранее. - person Hiws; 05.03.2020