Как группировать строки в пользовательском интерфейсе с поддержкой основных данных vue

#javascript #vue.js #vuejs2 #core-ui

Вопрос:

У меня есть таблица данных с использованием пользовательского интерфейса vue core, я хочу сгруппировать строку для отображения промежуточного итога определенной строки, как этого добиться ? введите описание изображения здесь

То, что я выяснил, приведено ниже

 <CDataTable
    :items="getBillComponents"
    :fields="tableFields"
    head-color="light"
    sorting
    :items-per-page="10"
    pagination
    >
    <div slot="footer" slot-scope="{ item, itemsAmount }">
        Subtotal {{ itemsAmount }} {{ item }}
    </div>
</CDataTable>
<script>
    export default {
        computed: {
            tableFields() {
                return [
                    { key: "title" },
                    { key: "date" },
                    { key: "amount" },
                ];
            },
            getBillComponents() {
                return [
                    {
                        title: "Electricity Bill",
                        date: "12-March-2018",
                        amount: "1000",
                    },
                    {
                        title: "Gas Bill",
                        date: "25-March-2018",
                        amount: "2000",
                    },
                ];
            },
        }
    }
</script>