Как сделать группировку в таблице с Vue.js?

Question

[ekzotika]

Пытаюсь сделать группировку таблицы. Есть массив Customers, по которым хочу группировать, и массив dataTable, в котором есть поле customer. Подскажите, что я неправильно делаю? Сейчас у меня выводятся друг за другом Customer-ы, а за ними уже вся таблица. Нужно чтобы за каждым Customer выводились данные, где customer - он, далее следующий и т.д.

<table class="table" ref="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Address</th>
                        <th>Customer</th>
                        <th>Distributor</th>
                        <th>Email</th>
                        <th>Site</th>
                        <th>State</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tr v-for="customer in customers">
                    <td colspan="8"><h4>{% verbatim %}{{ customer.name }}{% endverbatim %}</h4></td>
                </tr>
                <tr v-for="item in dataTable">
                        <td>{% verbatim %}{{ item.id }}{% endverbatim %}</td>
                        <td v-if="item.address.sub_locality"> {% verbatim %}{{ item.address.sub_locality }}, {{ item.address.raw_data }}{% endverbatim %}</td>
                        <td v-if="!item.address.sub_locality"></td>
                        <td>{% verbatim %}{{item.customer.name}}{% endverbatim %}</td>
                        <td>{% verbatim %}{{item.distributor.name}}{% endverbatim %}</td>
                        <td v-if="item.email !== 'nan'">{% verbatim %}{{item.email}}{% endverbatim %}</td>
                        <td v-if="item.email == 'nan'"></td>
                        <td>{% verbatim %}{{item.site}}{% endverbatim %}</td>
                        <td>{% verbatim %}{{item.state.name}}{% endverbatim %}</td>
                        <td><a><i class="glyphicon glyphicon-pencil" @click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state)"></i></a></td>
                        <td><a @click="deleteItem(item.id)"><i class="ion-trash-a"></i></a></td>
                </tr>

            </table>

Answer 1

[0xD34F]

Сделайте вычисляемое свойство, где и будет осуществляться группировка:

computed: {
  grouped() {
    return this.dataTable.reduce((acc, n) => {
      (acc[n.customer.name] = acc[n.customer.name] ?? []).push(n);
      return acc;
    }, {});
  },
},

<template v-for="(items, customer) in grouped">
  <tr>
    ...
  </tr>
  <tr v-for="item in items">
    ...
  </tr>
</template>

Comments

[ekzotika]

Огромное вам спасибо!
Подскажите, а могу ли я как-то это сделать без тега <template>? Так, как у меня сейчас сделано, в таблице. Не могу сообразить

[0xD34F]

ekzotika, это и будет "как сейчас сделано", template существует только в разметке, реально элемент не создаётся.

[ekzotika]

0xD34F,

<table class="table" ref="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Address</th>
                        <th>Customer</th>
                        <th>Distributor</th>
                        <th>Email</th>
                        <th>Site</th>
                        <th>State</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <template v-for="(items, customer) in grouped">
                    <tr>
                        <td colspan="8"><h4>{% verbatim %}{{ customer }}{% endverbatim %}</h4></td>
                    </tr>
                    <tr v-for="item in items">
                            <td>{% verbatim %}{{ item.id }}{% endverbatim %}</td>
                            <td v-if="item.address.sub_locality"> {% verbatim %}{{ item.address.sub_locality }}, {{ item.address.raw_data }}{% endverbatim %}</td>
                            <td v-if="!item.address.sub_locality"></td>
                            <td>{% verbatim %}{{item.customer.name}}{% endverbatim %}</td>
                            <td>{% verbatim %}{{item.distributor.name}}{% endverbatim %}</td>
                            <td v-if="item.email !== 'nan'">{% verbatim %}{{item.email}}{% endverbatim %}</td>
                            <td v-if="item.email == 'nan'"></td>
                            <td>{% verbatim %}{{item.site}}{% endverbatim %}</td>
                            <td>{% verbatim %}{{item.state.name}}{% endverbatim %}</td>
                            <td><a><i class="glyphicon glyphicon-pencil" @click="showModalToEdit(item.id, item.address, item.email, item.site, item.customer, item.distributor, item.state)"></i></a></td>
                            <td><a @click="deleteItem(item.id)"><i class="ion-trash-a"></i></a></td>
                    </tr>
                </template>
            </table>

Вот так таблица выводится пустая почему-то.. в инспекторе смотрю, после </thead> таблица заканчивается и всё

[0xD34F]

ekzotika, а если заменить template на tbody?

[ekzotika]

0xD34F, да, пробовала, тоже самое..

[0xD34F]

ekzotika, ну, чем мог - помог.

Попробуйте воспроизвести свою ситуацию в песочнице - может, взглянув на проблему живьём, удастся понять, что к чему.

[ekzotika]

0xD34F, а мне нужно <template> как-то описывать в скрипте?

[0xD34F]

ekzotika, что значит "описывать", в каком скрипте?

[ekzotika]

0xD34F, ну в самом Vue, там где всё дело происходит, где methods, cumputed и т.д.

[0xD34F]

ekzotika, я вас не понимаю.

cumputed

Опечатка случайная, или вы действительно подобное написали у себя в коде?

[ekzotika]

0xD34F, конечно опечатка!)

[ekzotika]

0xD34F, заработало!!! Огромное вам спасибо, нужно было присвоить <tbody> какой-то класс и всё получилось!) Спасибо вам!

[ekzotika]

0xD34F, добрый день!
Не будете ли вы против подсказать мне ещё раз?
У меня сейчас массив grouped состоит только из тех Customer-ов, которые есть в dataTable. dataTable - массив, который создается из таблицы, где у каждого Customer уже есть какие-то данные. А если у него ещё их нет, то он в этот массив никак не попадает, а мне нужно, чтобы выводились и те, у которых данных нет, то есть и те, которые в массиве Customers. Можно ли как-то в массив grouped добавлять данные из двух массивов?
На примере сгруппированной таблицы:

"Customer с данными"
Строки с его данными
"Customer без данных"
"Customer с данными"
Строки с его данными

[0xD34F]

ekzotika,

return this.dataTable.reduce(
  (acc, n) => (acc[n.customer.name].push(n), acc),
  Object.fromEntries(this.Customers.map(n => [ n, [] ]))
);

[ekzotika]

0xD34F, так не выводит..
Возможно, я вам данные не полностью предоставила. Вот эти 2 массива:

[0xD34F]

ekzotika, информация, которая может быть представлена в текстовой форме, в виде изображений для меня не существует.

[ekzotika]

0xD34F, извините.

customers: {id: .., name: ..., name_en: ..., sap: ..., sap_be: ...}, {....}, ..

dataTable: {active: ..., address: {...}, customer: {id: .., name: ..., name_en: ..., sap: ..., sap_be: ...}, distributor: {...}, email: ..., head_office: ..., id: ..., site: ..., state: {...}}, {...}, {...}

[0xD34F]

ekzotika, замените [ n, [] ] на [ n.name, [] ].

[ekzotika]

0xD34F, благодарю!
А как правильно будет сделать for, вместо v-for="[customer, items] in grouped" , подскажите, пожалуйста!

[0xD34F]

ekzotika, в ответе вроде бы написано, разве нет?

[ekzotika]

0xD34F, нужно было в другом порядке и с другими скобками) Спасибо вам ещё раз огромное!