Мне нужно создать таблицу, как показано на рисунке ниже, используя Bootstrap Vue.
Здесь мужчина и женщина сгруппированы по соответствующим разделам, это можно сделать, используя простые <td> и <col-group>,
, в документации по начальной загрузке есть слот table-colgroup, но я не нашел способ использовать в этом сценарии.
Я реализовал таблицу в фрагментах кода ниже:
Vue.config.productionTip = false
Vue.component('icons', {
template: '<a><slot></slot></a>'
})
new Vue({
el: '#app',
methods: {
addService() {
this.model.services.push({});
}
},
computed: {
sec_a_male: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_a_male) || 0)
}, 0)
},
sec_a_female: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_a_female) || 0)
}, 0)
},
sec_b_male: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_b_male) || 0)
}, 0)
},
sec_b_female: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_b_female) || 0)
}, 0)
}
},
data: {
model: {
services: []
},
fields: [{
key: "class",
label: "Class"
},
{
key: "section_a_male",
label: "Male"
},
{
key: "section_a_female",
label: "Female"
},
{
key: "section_b_male",
label: "Male"
},
{
key: "section_b_female",
label: "Male"
}
]
}
})
<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.css" />
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card header-tag="header" footer-tag="footer">
<template slot="header" class="mb-0">
<button type="button" class="btn btn-primary btn-sm" @click.prevent="addService">
<icons :icon="['fas', 'plus']" /> Add Items/Service</button>
</template>
<b-card-body>
<b-table responsive bordered striped hover caption-top :fields="fields" :items="model.services" caption-top>
<template slot="top-row" slot-scope="data">
<td rowspan="1"></td>
<th colspan="2" scope="colgroup">Section A</th>
<th colspan="2" scope="colgroup">Section B</th>
</template>
<template slot="class" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.class" :name="`class_${data.index}`" type="text" />
</template>
<template slot="section_a_male" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_a_male" :name="`section_a_male_${data.index}`" type="text" />
</template>
<template slot="section_a_female" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_a_female" :name="`section_a_female_${data.index}`" type="text" />
</template>
<template slot="section_b_male" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_b_male" :name="`section_b_male_${data.index}`" type="text" />
</template>
<template slot="section_b_female" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_b_female" :name="`section_b_female_${data.index}`" type="text" />
</template>
<template slot="bottom-row" slot-scope="data">
<td>Total</td>
<td>{{sec_a_male}}</td>
<td>{{sec_a_female}}</td>
<td>{{sec_b_male}}</td>
<td>{{sec_b_female}}</td>
</template>
<template slot="table-colgroup">
<col>
<col span="2">
<col span="2">
</template>
</b-table>
</b-card-body>
</b-card>
</div>
Ожидаемый результат:
Пожалуйста, помогите!