Vue:我如何才能使网格而不仅仅是表中的行？
Vue:我如何才能使网格而不仅仅是表中的行？
提问于 2018-04-29 23:10:03
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
Stack Overflow用户
回答已采纳
发布于 2018-04-30 01:41:05
如果您不需要使用<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50092155
复制相关文章
相似问题
腾讯云开发者
