如何在 bootstrap vue 中创建五个相等的列？

Posted 2023-02-23

【中文标题】如何在 bootstrap vue 中创建五个相等的列？

【英文标题】：How can I make five equal columns in the bootstrap vue?

【发布时间】：2019-03-01 22:14:39

【问题描述】：

我从这里得到参考：https://bootstrap-vue.js.org/docs/components/layout#columns-b-col

所以我想在 1 行中制作 5 列

我的脚本是这样的：

<template>
    ...
        <b-row>
            <b-col cols v-for="club in clubs">
                club.name
            </b-col>
        </b-row>
    ...
</template>
<script>
    export default 
        data () 
            return
                clubs: [
                    id:1, name:'chelsea',
                    id:2, name:'liverpool',
                    id:3, name:'mu',
                    id:4, name:'city',
                    id:5, name:'arsenal',
                    id:6, name:'tottenham',
                    id:7, name:'juventus',
                    id:8, name:'madrid',
                    id:9, name:'barcelona',
                    id:10, name:'psg'
                ]
            
        ,
        ...
    
</script>

结果是1行有10列

我想制作这样的标签：

<b-row>
    <b-col cols>
        chelsea
    </b-col>
    <b-col cols>
        liverpool
    </b-col>
    <b-col cols>
        mu
    </b-col>
    <b-col cols>
        city
    </b-col>
    <b-col cols>
        arsenal
    </b-col>
</b-row>
<b-row>
    <b-col cols>
        tottenham
    </b-col>
    <b-col cols>
        juventus
    </b-col>
    <b-col cols>
        madrid
    </b-col>
    <b-col cols>
        barcelona
    </b-col>
    <b-col cols>
        psg
    </b-col>
</b-row>

如果是这样的标签，它将在 1 行中显示 5 列

我的问题是如何在循环中实现它？

【参考方案1】：

创建一个计算属性：

   ...
   computed: 
      formattedClubs() 
          return this.clubs.reduce((c, n, i) => 
            if (i % 5 === 0) c.push([]);
            c[c.length - 1].push(n);
            return c;
          , []);
      
   

然后

<b-row v-for="row in formattedClubs">
  <b-col cols v-for="club in row">
    club.name
  </b-col>
</b-row>

【讨论】：

您的代码似乎并不完美。例如，我有 2 个项目。如果我使用您的代码，在 1 行中只有 2 列。它应该保持 5 列。 2 列有项目，其他 3 列是空的

我提出一个新问题。看看这个：***.com/questions/52584241/…。也许你可以再帮我一次