使用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每一行的一样。