Vue+ElementUI 如何实现优雅换行

Question

`

<el-row>
 <div v-for="(item,index) in xxx">
   <el-col :span="6">
    <my-component>...</my-component>
</el-col>
     <div v-if="(index+1)%4===0">    
     </el-row>
     <el-row>
    </div>
   </div> 
</el-row>`

但是这样换行会导致里面的el-row被嵌在DIV里面。与外层的el-row不在同一层级上。

我的component 也会出现其它一些奇怪的问题。

有没有其它办法。
我想多个组件（显示图表）并排显示在一行，达到若干个后（比如设置的4个），则进行换行.

有没有其它更好的排列的写法。谢谢！

Answer 1

好吧。自己解决了。

大概就是用2个循环

<div v-for="i in xxx.length">
    <el-row>
        <div v-for="j in 4">
            <el-col :span="6">
                <p> (i-1)*4j </p>
            </el-col>    
    </el-row>
</div>