如何使用“_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>