Как полученный список разделить на три столбца, содержащие одинаковые по высоте и ширине ячейки?
Получаю данные, которые выстраиваются в один список, а мне его нужно разделить на три столбца, содержащие одинаковые по высоте и ширине ячейки? И если высота одной ячейки меняется, то меняется высота всех ячеек в этой строке, ну типа как в 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> |
<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>
Дополнительно:
Ответы:
мне его нужно разделить на три столбца, содержащие одинаковые по высоте и ширине ячейки? И если высота одной ячейки меняется, то меняется высота всех ячеек в этой строке
snippet
- А как сделать чтобы текст переносился?
- Tikit, какой текст?
- Обычный текст
- Tikit, он переносится по умолчанию по словам, если не переносится, то можно принудительно указать используя css свойство word-break.
Если продолжать использовать таблицу, то разбить массив на чанки по три элемента https://stackoverflow.com/questions/8495687/split-... и вывести двумя вложенными циклами
<tr v-for="chunk in chunks"> <td v-for="td in chunk"> |
<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> |
<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); } |
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
- Ширина колонок меняется, если много текста. А как сделать чтобы текст переносился?
- Tikit, зафиксировать ширину колонок.
для таблиц - table-layout:fixed
для гридов - min-width: 0можно и принудительно заставить текст переноситься - break-word
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для разделения списка на три столбца, содержащие одинаковые по высоте и ширине ячейки, можно воспользоваться CSS-свойством `column-count`. Это свойство разбивает содержимое на указанное количество колонок.
Пример использования:
```html
<ul style="column-count: 3"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> <li>Элемент 4</li> <li>Элемент 5</li> <li>Элемент 6</li> <li>Элемент 7</li> <li>Элемент 8</li> <li>Элемент 9</li> </ul>
```
В данном примере у нас есть список элементов `
` элементу с помощью атрибута `style`, указывая `column-count: 3;`. Это приведет к тому, что элементы списка будут автоматически разделены на три колонки одинаковой ширины.
Таким образом, при просмотре страницы список будет отображаться в виде трех столбцов с равными по ширине и высоте ячейками.
Если вам необходимо дополнительно стилизовать элементы списка или добавить другие CSS-свойства, вы можете использовать дополнительные стили или классы для этого.