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

Z时代
2024-01-10
分类：技术分享

使用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">
<div>
<div>
<div><font size="5">{{project.pcname}}</font></div>
<div>{{project.pname}}</div>
</div>
<div>
<img src="https://segmentfault.com/images/project/prohead.jpg" class="image">
<div><i class="el-icon-time"></i>{{project.pdatesave}}</div>
</div>
<div>
&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.效果如下：

回答

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>

明白了吧？

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

<!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="https://segmentfault.com/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>