我有一个表,其中一行包含多个“更多详细信息”按钮,单击该按钮将展开以显示有关该行的其他信息。基本上,对于同一行,如果单击第一个“更多详细信息”按钮,我要显示信息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>
答案 0 :(得分:1)
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
和一些data
传递给method
并从那里控制状态。这样,我还可以在表的详细信息位置上设置一些显示选项,以便可以显示/隐藏表中显示的对象中的数据。