Время чтения: 2 мин.
Для создания компонента Vue, который выводит элементы в таблицу с возможностью группировки рядом стоящих строк, можно использовать следующий подход:
- Создадим компонент
GroupedTable, который будет принимать массивitemsи имя свойства, по которому будет происходить группировка. - Внутри компонета будем проходить по массиву
itemsи формировать новый массив, в который будем добавлять строки для группировки, если значение свойства для группировки изменилось.
Пример реализации:
<template>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<template v-for="(item, index) in groupedItems">
<tr v-if="item.isGroupHeader" class="group-header">
<td colspan="3">{{ item.groupValue }}</td>
</tr>
<tr v-else>
<td>{{ item.name }}</td>
<td>{{ item.category }}</td>
<td>{{ item.value }}</td>
</tr>
</template>
</tbody>
</table>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
},
groupBy: {
type: String,
required: true
}
},
computed: {
groupedItems() {
const grouped = [];
let lastGroupValue = null;
this.items.forEach(item => {
const currentGroupValue = item[this.groupBy];
if (currentGroupValue !== lastGroupValue) {
grouped.push({
isGroupHeader: true,
groupValue: currentGroupValue
});
lastGroupValue = currentGroupValue;
}
grouped.push(item);
});
return grouped;
}
}
};
</script>
<style>
.group-header {
background-color: #f0f0f0;
font-weight: bold;
}
</style>Как это работает:
- Props:
items: Массив объектов, которые нужно отобразить в таблице.groupBy: Имя свойства, по которому будет происходить группировка.
- Computed Property
groupedItems:- Проходим по массиву
itemsи проверяем, изменилось ли значение свойства, по которому происходит группировка. - Если значение изменилось, добавляем строку-заголовок группы в массив
grouped. - После этого добавляем текущий элемент в массив
grouped.
- Проходим по массиву
- Template:
- Используем
v-forдля отображения элементов массиваgroupedItems. - Если элемент является заголовком группы (
isGroupHeader: true), отображаем строку с заголовком группы, которая занимает всю ширину таблицы. - Иначе отображаем обычную строку таблицы с данными.
- Используем
- Стили:
- Добавляем стиль для строки-заголовка группы, чтобы она выделялась.
Пример использования компонента:
<template>
<div>
<GroupedTable :items="items" groupBy="category" />
</div>
</template>
<script>
import GroupedTable from './GroupedTable.vue';
export default {
components: {
GroupedTable
},
data() {
return {
items: [
{ name: 'Item 1', category: 'Category A', value: 10 },
{ name: 'Item 2', category: 'Category A', value: 20 },
{ name: 'Item 3', category: 'Category B', value: 30 },
{ name: 'Item 4', category: 'Category B', value: 40 },
{ name: 'Item 5', category: 'Category C', value: 50 }
]
};
}
};
</script>В этом примере таблица будет сгруппирована по категориям, и перед каждой группой будет отображаться строка с названием категории.
Добавить комментарий