[英]How to load Bootstrap-vue "b-table" row data dynamically using "_showDetails"?
I have bootstrap-vue "b-table" used in my Vue page.我的 Vue 页面中使用了 bootstrap-vue "b-table"。 Each row has an "view-details" button, that shows additional information about the selected row.
每行都有一个“查看详细信息”按钮,用于显示有关所选行的附加信息。 I was looking for examples that can send request to backend when user clicks for view-details, that expands the row and shows details retrieved from backend.
我正在寻找可以在用户单击查看详细信息时向后端发送请求的示例,该示例扩展行并显示从后端检索的详细信息。 The "_showDetails" option from bootstrap-vue table seems limited as the examples all use the data that was already loaded along with the main tableland using this way would overload the page as my data for each row is too big.
bootstrap-vue 表中的“_showDetails”选项似乎有限,因为示例都使用已经与主表一起加载的数据,使用这种方式会导致页面过载,因为我的每行数据太大。
Are there any examples or even other libs that support such functionality?是否有任何示例甚至其他支持此类功能的库?
You can do this with bootstrap-vue
without any problems.你可以使用
bootstrap-vue
做到这一点,没有任何问题。
Create a method that gets called when you click your "view details" button, this method will call your backend and insert the data onto your item.创建一个在您单击“查看详细信息”按钮时调用的方法,该方法将调用您的后端并将数据插入到您的项目中。 Once the data has been retrieved you set
_showDetails
to true on the item, which will open the details.检索到数据后,您可以在项目
_showDetails
设置为 true,这将打开详细信息。
You could also open it immediately and show a loading message while the data is retrieved, that's up to you.您也可以立即打开它并在检索数据时显示加载消息,这取决于您。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.