javascript - Bootstrap Vue 表:每行中的每个显示详细信息按钮显示不同的详细信息
问题描述
我有一个表格,其中一行将包含多个“更多详细信息”按钮,单击该按钮会展开以显示有关该行的其他信息。基本上,对于同一行,如果您单击第一个“更多详细信息”按钮,我想显示信息 X,如果用户单击第二个“更多详细信息”按钮,我想显示信息 Y。
<template slot="iinstances" slot-scope="row">
<div v-if=" total_rows>0 && row.item.imProdInstDet!=''"> <!-- The buttons are not displayed if the data is dummy -->
<!-- Release Notes Button / Opens details row -->
<b-button style="text-align: center" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> <!-- @click.stop prevents a 'row click' event -->
{{row.item.imProdInstDet.length}}
</b-button>
<!---->
</div>
</template>
<template slot="row-details" slot-scope="row">
<div style="float:left; width: 100%;">
<pre>{{row.item.imProdInstDet}}</pre>
</div>
</template>
<template slot="finstances" slot-scope="row">
<!-- <div v-if=" total_rows>0 && row.item.notes!=''"> <!– The buttons are not displayed if the data is dummy –>-->
<!-- Release Notes Button / Opens details row -->
<b-button :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> <!-- @click.stop prevents a 'row click' event -->
More Details
</b-button>
<!---->
<!-- </div>-->
</template>
<template slot="row-details" slot-scope="row">
<div style="float:left; width: 100%;">
<pre>{{row.item.fiProdInstDet}}</pre>
</div>
</template>
这行不通。如果我注释掉最后一个row-details
模板,那么两个按钮都会显示相同的信息。不幸的是,文档也没有谈论它。关于如何实现这一目标的任何想法?
编辑:
<b-table
v-if="rows.length"
:thead-tr-class="'report-thead'"
:tbody-tr-class="'report-tbody'"
:items="rows"
:fields="columnsToDisplay"
:sort-compare="sortTableByKey"
:striped="true"
:bordered="true"
:outlined="true"
:hover="true"
:no-sort-reset="true"
:show-empty="true"
:filter="filter"
@filtered="onFiltered"
:empty-text="emptyText"
:sort-desc="true"
:caption-top="true"
responsive>
/b-table>
解决方案
bootstrap-vue
是一个多功能的图书馆。一种解决方案可能是:
new Vue({
el: "#app",
data() {
return {
fields: ['first_name', 'last_name', 'show_details'],
detailsMask: [],
items: [{
isActive: true,
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
isActive: false,
age: 21,
first_name: 'Larsen',
last_name: 'Shaw'
},
{
isActive: false,
age: 89,
first_name: 'Geneva',
last_name: 'Wilson',
// _showDetails: true
},
{
isActive: true,
age: 38,
first_name: 'Jami',
last_name: 'Carney'
}
]
}
},
methods: {
toggleRowDetails(row, data) {
this.detailsMask = data.split(', ')
row.toggleDetails()
}
}
})
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
<b-container class="bv-example-row">
<b-row>
<b-col>
<b-table :items="items" :fields="fields" striped responsive="sm">
<template v-slot:cell(first_name)="row">
{{ row.item.first_name }}
<b-button size="sm" @click="toggleRowDetails(row, 'age, first_name')" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Age
</b-button>
</template>
<template v-slot:cell(show_details)="row">
<b-button size="sm" @click="toggleRowDetails(row, 'last_name')" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
</b-button>
</template>
<template v-slot:row-details="row">
<b-card>
<b-row
v-for="(detail, i) in detailsMask"
:key="`detail-${i}`"
class="mb-2"
>
<b-col
sm="3"
class="text-sm-rigth"
>{{ detail }}: {{ row.item[detail] }}</b-col>
</b-row>
</b-card>
</template>
</b-table>
</b-col>
</b-row>
</b-container>
</div>
我刚刚使用了https://bootstrap-vue.org/docs/components/table#row-details-support的演示并对其进行了一些修改:将row
and some传递data
给 amethod
并从那里控制状态。这样我还可以在表格的详细信息槽上设置一些显示选项,这样我就可以显示/隐藏表格中显示的对象的数据。
推荐阅读
- google-apps-script - 根据 Google Form 信息提交从 Google Drive 获取文件
- php - 期望语句-php 语法| 如果别的
- php - 如何在php中使用今天的日期和出生日期计算年龄
- android-studio - 从启动特定活动开始时 startActivityForResult() 是否不起作用?
- python - 从 Python 中的单纯形中随机均匀采样
- android - 如何按当前登录的用户在顶部对列表进行排序
- apache-kafka - filebeat将输出设置为kafka,遇到“丢弃无效消息”,这是怎么回事
- javascript - 如何在jquery或javascript中获得小数点后的精确两位数
- flutter - 如何将字符串日期转换为日期时间?
- java - 如何使用 RxJava 重复当