有可能用bootstrap vue制作一个包含多个项目的堆叠b表吗

Question

我想在引导程序vue-b表中显示多个项目。用一张叠好的桌子可以这样做吗？文档仅显示了具有单个项目的堆叠表的示例。

如何指定字段或项目？这不起作用。这段代码创建了一个包含两列的堆叠表(左边是列标题，右边是值(。不是在表的左半部分并排显示这两个项目，而是重复列标题，所有内容都组织在相同的2个垂直列中。

<template>
...
<b-table
small
stacked
:fields="fooParameters"
:items="foos"
:busy="true"
show-empty
empty-text="No duplicates"
>
</b-table>
...
</template>
<script>
...
duplicates: [{fooName: "Alice", fooAge: "25"}, {fooName: "Bob": fooAge: "24"}]
...
</script>

Answer 1

stacked道具将为每个项目生成一行，但由于这不是您想要的，因此您必须创建使项目水平的功能，每个项目都有自己的列。

我相信下面的片段就是你想要的，如果不是，你可以把它作为一个开始参考。

new Vue({
el: "#app",
computed: {
fields() {
//'isRowHeader: true' to render it as a TH instead of TD
// Formatter to capitalize the first letter, can be removed
let fields = [{
key: "type",
stickyColumn: true,
isRowHeader: true,
formatter: this.ucFirstLetter
}];
Object.keys(this.results).forEach((key) => {
// Since the key is just an index, we hide it by setting label to an empty string.
fields.push({
key: key,
label: ""
});
});
return fields;
},
items() {
const items = [];
/* map our columuns */
const cols = Object.keys(this.results);
/* 
map our types based on the first element 
requires all the elements to contain the same properties,
or at least have the first one contain all of them
*/
const types = Object.keys(this.results[cols[0]]);
/* create an item for each type */
types.forEach((type) => {
const item = {
type: type
};
/* fill up item based on our columns */
cols.forEach((col) => {
item[col] = this.results[col][type];
});
items.push(item);
});
return items;
}
},
data() {
return {
results: [{
correct: 0.007,
errors: 0.081,
missing: 0.912
},
{
correct: 0.008,
errors: 0.098,
missing: 0.894
},
{
correct: 0.004,
errors: 0.089,
missing: 0.91
},
{
correct: 0.074,
errors: 0.07,
missing: 0.911
}
]
};
},
methods: {
ucFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
});

<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table :items="items" :fields="fields" small bordered striped sticky-header no-border-collapse responsive>
</b-table>
</div>