Vue: как я могу сделать сетку вместо строк в таблице? - PullRequest
Новая
       8

Vue: как я могу сделать сетку вместо строк в таблице?

0 голосов
/ 30 апреля 2018

Часть моего шаблона Vue выглядит так: 

<tr v-for="template in templates" :key="template.id" >
  <td width="400">
    <a @click="create(template.id)" class="hand-hover">
      <i :class="`fa fa-${template.icon} fa-fw`"></i>
      <strong>{{ template.label }}</strong>
    </a>
  </td>
</tr>

Как я могу изменить его, чтобы у меня было два столбца вместо одного, чтобы он заполнял столбец от 1 до 50% от длины templates, а затем начинал новый столбец?

Я думал о делении templates на два, а затем просто на две петли ... есть ли лучший способ?

1 Ответ

0 голосов
/ 30 апреля 2018

Если вам не нужно использовать <table> как таковое, самое простое решение - использовать вместо него контейнер с display: flex и v-for петлевых дочерних элементов div, которые переносятся горизонтально следующим образом: 

.container {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}

Однако, если вам действительно нужно сохранить <table>, вы можете вычислить массив templatePairs: 

computed:
  templatePairs () {
    return this.templates.reduce((acc, n, i) => {
      i % 2 ? acc[acc.length - 1].push(n) : acc.push([n])
      return acc
    }, [])
  }

Для использования следующим образом: 

<tr v-for="(templatePair, i) in templatePairs" :key="i">
  <td v-for="template in templatePair" :key="template.id" width="400">
    <a @click="create(template.id)" class="hand-hover">
      <i :class="`fa fa-${template.icon} fa-fw`"></i>
      <strong>{{ template.label }}</strong>
    </a>
  </td>
</tr>
...