结合v-for，el-row与el-col控制卡片的布局问题

发布于
2018-04-09

使用element-ui提供的组件card展示商品，前端获得所有商品后再card外用v-for循环输出展示所有商品。
想要一行展示四个商品，但是不知道怎么控制el-row，与el-col，最后的到的效果每行之间没有间隙，并且感觉其实所有商品还是在一行显示，只是因为width不够所以换行显示，怎么解决以上问题？
1.代码如下

            <el-row>
                <el-col :span="4" v-for="project in allprojects" :key="project.pid" :offset="1">
                    <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 260px;height: 320px;">
                        <div style="padding: 6px;height: 310px;">
                            <div>
                                <div><font size="5">{{project.pcname}}</font></div>
                                <div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
                            </div>
                            <div style="position: relative;top: 30px;">
                                <img src="../images/project/prohead.jpg" class="image">
                                <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
                            </div>
                            <div style="position: relative;top: 45px;">
                                &nbsp;&nbsp;<i class="el-icon-view"></i><span>{{project.ppageview}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-button type="text"><font size="4">查看</font></el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

2.效果如下：

element-ui vue.js

阅读 71.1k

3 个回答

得票最新

李李李li

1212

发布于
2019-01-10

1.首先在computed里计算数据有多少行

computed: {
    pages () {
      const pages = []
      this.allprojects.forEach((item, index) => {
        const page = Math.floor(index / 4)//4代表4条为一行，随意更改
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

2.在页面循环刚计算出的二维数组，el-row开始循环：

  <el-row v-for="(page, index) of pages" :key="index" >
    <el-col :span="4" v-for="(item, innerindex) of page" :key="item.projectId" :offset="innerindex > 0 ? 2 : 1">
     //code...
    </el-col>
  </el-row>

明白了吧？

luozz

5.8k3629

发布于
2018-04-09

根据你提供的进行了稍微改动(就改了一个地方，已经备注好了)：

<!DOCTYPE html>
<html xmlns:border-radius="http://www.w3.org/1999/xhtml" xmlns:margin="http://www.w3.org/1999/xhtml"

xmlns:color="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
<div id="pro_form" style="position: relative;width: 100%;height: 1000px;">
    <div style="position: relative;top: 100px;left:130px;">
        <el-row>
            <!--就改这里一行-->
            <el-col :span="4" v-for="(project,index) in allprojects" :key="index" :offset="1" style="margin-bottom:40px">
                <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover" style="width: 260px;height: 320px;">
                    <div style="padding: 6px;height: 310px;">
                        <div>
                            <div><font size="5">{{project.pcname}}</font></div>
                            <div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
                        </div>
                        <div style="position: relative;top: 30px;">
                            <img src="../images/project/prohead.jpg" class="image">
                            <div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
                        </div>
                        <div style="position: relative;top: 45px;">
                            &nbsp;&nbsp;<i class="el-icon-view"></i><span>{{project.ppageview}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button type="text"><font size="4">查看</font></el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
</div>
</body>
<style>

html,body{
    margin:0px;
    height:100%;
}
</style>
<script>

var vue=new Vue({
    el: '#app',
    data: {
        allprojects:[
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            },
            {
                pid:'123',
                pname:'pname',
                pcname:'pcname',
                pdatesave:'2018-4-9 11:11:11',
                ppageview:10
            }
        ]
    },
    methods: {//这里用于定义方法
    },
    computed: {//计算属性
    }
})
</script>
</html>

注意事项：
这是为了图方便才直接在el-col上直接写的style，还可以通过CSS选中.el-col来添加相应样式

希望我的回答对你有所帮助！

DNZ1206

发布于
2020-10-30

更新于
2020-10-30

新手上路，请多包涵

我找到答案了，把for循环写在 <el-col> 可解。

事实上，for循环写在 row 和 col 中，DOM结构是完全不同的。
前者：有数个 <el-row>，数量等于循环的次数，每个 <el-row> 中的内容一致。
后者：1个 <el-row> 中有数个 <el-col>，数量等于循环的次数。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

结合v-for，el-row与el-col控制卡片的布局问题

你尚未登录，登录后可以

不同页面之间可以通过localstorage保存响应式吗？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

vite项目如何导入.pem公钥更规范？

使用vue-pdf本地浏览器使用chrome移动机型可以正常预览，但是到了线上就无法正常预览了?

移动端切换路由后返回，视频启动播放会严重滞后，好怪？