如何使用“_showDetails”动态加载Bootstrap-vue“b-table”行数据？

Question

我的 Vue 页面中使用了 bootstrap-vue "b-table"。 每行都有一个“查看详细信息”按钮，用于显示有关所选行的附加信息。 我正在寻找可以在用户单击查看详细信息时向后端发送请求的示例，该示例扩展行并显示从后端检索的详细信息。 bootstrap-vue 表中的“_showDetails”选项似乎有限，因为示例都使用已经与主表一起加载的数据，使用这种方式会导致页面过载，因为我的每行数据太大。

是否有任何示例甚至其他支持此类功能的库？

Answer 1

你可以使用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>