ElementUI中使用<el-row>自适应布局导致显示错乱

发布时间 2023-08-21 13:49:55作者: 阿宇爱吃鱼

 

错乱代码(部分):

<el-row :gutter="5">
  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> 
    <img :src="baseUrl + item.busCaseImage" :alt="item.busCaseDesc" style="width: 100px;height: auto;max-width: 100%; max-height: 100%">
  </el-col>
</el-row> 

经研究查询:将el-col全部放到el-row中,可能会出现分辨率或缩放、内容不同导致el-col高度不一致,而使布局异常。

解决方案:el-row添加flex布局,设置flex-wrap:wrap即可。

修改后的代码:

<el-row :gutter="5" type="flex" style="flex-wrap:wrap">
  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> 
    <img :src="baseUrl + item.busCaseImage" :alt="item.busCaseDesc" style="width: 100px;height: auto;max-width: 100%; max-height: 100%">
  </el-col>
</el-row>