错乱代码(部分):
<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>