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

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

1 голос
/ 04 марта 2020

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

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

1 Ответ

2 голосов
/ 04 марта 2020

Вы можете сделать это с помощью 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/bootstrap-vue@2.5.0/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.3.1/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>
...