The layout problem of controlling cards based on the combination of vmurforforellicrow and el-col

use the component card provided by element-ui to display goods. After getting all the goods at the front end, all the goods are displayed by card external v-for loop output.
wants to display four items in one line, but I don"t know how to control the final effect of el-row, and el-col,. There is no gap between each line, and it feels that all products are still displayed on one line, but the display line is changed because there is not enough width. How to solve the above problems?
1. The code is as follows 

            <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;">
                                <i class="el-icon-view"></i><span>{{project.ppageview}}</span>
                                <el-button type="text"><font size="4"></font></el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

2. The effect is as follows:

clipboard.png

Vue.js element-ui
Mar.02,2021

1. First calculate the number of rows of data in computed 

computed: {
    pages () {
      const pages = []
      this.allprojects.forEach((item, index) => {
        const page = Math.floor(index / 4)//44
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

2. In the two-dimensional array that has just been calculated in the page loop, el-row starts the loop: 

  <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>

do you understand?

A slight change has been made according to what you have provided (only one place has been changed and has been noted): 

<!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;">
                            <i class="el-icon-view"></i><span>{{project.ppageview}}</span>
                            <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: '-sharpapp',
    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>

Note:
this is style written directly on el-col for convenience. You can also add corresponding styles

by selecting .el-col via CSS .
I hope my answer will be helpful to you!

I have the answer. Write the for loop in < el-col > solvable.

in fact, the for loop is written in row and col, and the DOM structure is completely different.
the former: there are several < el-row >, the number is equal to the number of cycles, and the content in each < el-row > is the same.
the latter: there are several < el-col > in 1 < el-row >, and the number is equal to the number of cycles.

Previous: Angular2 users are prompted when they close the page or return to the previous page

Next: Properties that cannot be accessed after filling an object into a window.localStorage?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu