Как полученный список разделить на три столбца, содержащие одинаковые по высоте и ширине ячейки?

Question

[Tikit]

Получаю данные, которые выстраиваются в один список, а мне его нужно разделить на три столбца, содержащие одинаковые по высоте и ширине ячейки? И если высота одной ячейки меняется, то меняется высота всех ячеек в этой строке, ну типа как в excel.

<template>
    <div>
        <table class="table">
            <tbody>
            <tr v-for="spisok in receipt">
                <td>
                <div>№ ID {{ spisok.id }}</div>
                <div> Наименование {{ spisok.name }}</div>
                <div>Номер {{ spisok.number }}</div>
                <div>Инвентарный {{ spisok.inv }}</div>
                <div>Инвентарный {{ spisok.dn }}</div>
                <div>Инвентарный {{ spisok.dc }}</div>
                <div>Инвентарный {{ spisok.ans }}</div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: "SpisokLabelsComponent",
    data(){
        return{
            receipt: null,
        }
    },

    mounted() {
        this.getReceipt()
    },

    methods: {
        getReceipt(){
            axios.get('/api/oborudovanies')
                .then(res => {
                    this.receipt = res.data.data;
                    console.log(res)
                })
        },
    }
}
</script>

Answer 1

[Михаил Р.]

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

Comments

[Tikit]

А как сделать чтобы текст переносился?

[Михаил Р.]

Tikit, какой текст?

[Tikit]

Обычный текст

[Михаил Р.]

Tikit, он переносится по умолчанию по словам, если не переносится, то можно принудительно указать используя css свойство word-break.

Answer 2

[Сергей delphinpro]

Если продолжать использовать таблицу, то разбить массив на чанки по три элемента https://stackoverflow.com/questions/8495687/split-... и вывести двумя вложенными циклами

<tr v-for="chunk in chunks">
  <td v-for="td in chunk">

Либо вывести в одном потоке и использовать css grid в три столбика

<div clsas=grid>
  <div v-for="spisok in receipt">
    <div>№ ID {{ spisok.id }}</div>
    <div> Наименование {{ spisok.name }}</div>
    <div>Номер {{ spisok.number }}</div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Comments

[Tikit]

Ширина колонок меняется, если много текста. А как сделать чтобы текст переносился?

[Сергей delphinpro]

Tikit, зафиксировать ширину колонок.
для таблиц - table-layout:fixed
для гридов - min-width: 0

можно и принудительно заставить текст переноситься - break-word