Адаптивный список в несколько столбцов?

Question

[Игорь]

Коллеги, приветствую.

Уже продолжительное время, гложет вопрос.
Как сделать адаптивный список в несколько столбцов?

Использую vuetifyjs

и первая нубоконструкция

...
<v-row>
   <v-col 
      md="3"
      sm="6"
      cols="12"
      v-for="(city_item, city_index) in cities"
      class="pa-0 text-center"
      >
      {{city_item.name}}
   </v-col>
</v-row>
...

Получилось нечто


Возможно есть более элегантный способ, с использованием
ul li

Спасибо.

Comments

[Brad9aga]

смотря какой итог ты хоч получить

[Игорь]

Brad9aga, Приоткрою карты.

Список с городами относительно динамический.
Почему относительно? Города не часто строятся.

Но в зависимости от выбранной станы, изменяется длина массива.

Хочу банально получить список ссылок на странице.
Но не в один столбец, а в несколько столбцов.

Длина массива может измениться в меньшую сторону.

Возможно есть другие варианты, посоветуйте.

Answer 1

[Evgeny Kulakov]

Вообще для v-row и v-col можно указать какой тэг использовать при выводе через атрибут tag.

Comments

[Игорь]

Ну да, есть такое.

И всё же.

В целом это работает, вот только сортировка неверная.
Расположение элементов происходит с лева на право

[Роман]

Расположение элементов происходит с лева на право

Игорь, поменяйте v-row и v-col местами и расположение элементов станет сверху в низ

[Evgeny Kulakov]

Игорь, Игорь, ага, понял задачу. Тогда только программный расчёт на ум приходит. Определяете количество колонок и что выводить в каждую колонку.

[Игорь]

Роман, Почему вы так думаете?

v-row это строки

[Роман]

Игорь, потому что row у вас внешний цикл. То есть информацией вы заполняете построчно, сначала первая строка по одному названию на столбец, затем вторая строка и так далее.

[Роман]

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

Answer 2

[Игорь]

Решение!

// Загрузка городов
      let cities_items = await getCities({
        country_id: 3159,
        offset: 0,
        count: 50
      });

      // Загрузка регионов
      let regions_items = await getRegions({
        country_id: 3159
      });

      const max_cols = 4

      let regions = []
      let regions_size = Math.ceil(regions_items.length / max_cols); //размер подмассива
      for (let i = 0; i < Math.ceil(regions_items.length / regions_size); i++) {
        regions[i] = regions_items.slice((i * regions_size), (i * regions_size) + regions_size);
      }

      let cities = []
      let cities_size = Math.ceil(cities_items.length / max_cols); //размер подмассива
      for (let i = 0; i < Math.ceil(cities_items.length / cities_size); i++) {
        cities[i] = cities_items.slice((i * cities_size), (i * cities_size) + cities_size);
      }

<v-row>
      <v-col md="12" cols="12">
        <v-card class="pb-5">
          <v-card-title>Популярные города</v-card-title>
          <v-card-text>
            <v-row>
              <v-col
                md="3"
                sm="6"
                cols="12"
                v-for="(cities_item, cities_index) in cities"
                :key="cities_index"
                class="pa-0 text-left"
              >
                <ul>
                  <li v-for="(item, index) in cities_item">{{ item.name }}</li>
                </ul>
              </v-col>

            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col md="12" cols="12">
        <v-card class="pb-5">
          <v-card-title>Регионы России</v-card-title>
          <v-card-text>
            <v-row>
              <v-col
                md="3"
                sm="6"
                cols="12"
                v-for="(regions_item, region_index) in regions"
                :key="region_index"
                class="pa-0 text-left"
              >
                <ul>
                  <li v-for="(item, index) in regions_item">{{ item.name }}</li>
                </ul>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

image