3

使用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.效果如下:

clipboard.png

2018-04-09 提问
2 个回答
2

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

<!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来添加相应样式

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

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>

明白了吧?

撰写答案

推广链接