._el-row不换行">
当前位置:   article > 正文

关于ElementUI 中Layout 布局不能换行的解决方案_el-row不换行

el-row不换行
  1. <div class="info-card" v-for="(i,inx) in Farea.length/4" :key="inx">
  2. <el-row :gutter="24" >
  3. <el-col :span="6" v-for="(item,index) in Fareas(inx)" :key="index">
  4. <div class="boxs">
  5. <div class="imgbox">
  6. <img :src="item.icon" alt />
  7. </div>
  8. <div class="imgboxhover">
  9. <img :src="item.iconhover" alt />
  10. </div>
  11. <h1 v-text="item.title"></h1>
  12. <ul>
  13. <li v-for="(res,index) in item.chanaNode" v-text="res.name" :key="index"></li>
  14. </ul>
  15. </div>
  16. </el-col>
  17. </el-row>
  18. </div>

思路是这样的,     首先一行四个,24栏,每个六个,   每四个再循环一次,   把数组重新计算一下再循环出来就对了,

其中计算的代码

  1. Fareas(){
  2. return function(iten){
  3. console.log(this.Farea.slice(iten,iten+4))
  4. return this.Farea.slice(iten,iten+4)
  5. }
  6. }

这样就能正常循环,且循环出来都不影响

如果对您有帮助。

本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/117920
推荐阅读
相关标签