在el-row中循环渲染el-col,希望自动换行,el-col数据为空时,布局混乱


使用ElementUI的el-row,渲染多行的el-col,当数据为空时,布局显示混乱的解决方案

问题:

大家可能在使用el-row el-col进行布局的时候,可能会出现没有数据,el-col没有占位,

解决方案:

因为有些人为了简单,把所有的el-col放在一个el-row内,如果只有display:flex,会把所有的el-col都挤在一行。

加上flex-wrap: wrap之后可以自动换行,和分开写在el-row每一行的一样。

.el-row{
    display:flex;
    flex-wrap: wrap;
}
//加flex-wrap: wrap;因为有些人为了简单,把所有的el-col放在一个el-row内,如果只有display:flex;会把所有的el-col都挤在一行。加上flex-wrap: wrap;之后可以自动换行,和分开写在el-row每一行的一样。
参考网址:

参考网址


文章作者: wsh
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 wsh !
  目录