elementui中el-row的el-col排列混乱问题及解决
作者:前端菜鸟。
这篇文章主要介绍了elementui中el-row的el-col排列混乱问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
el-row中el-col排列混乱
解决方案
将el-row中元素改为flex布局
设置flex-wrap: wrap,避免el-row中元素span之和超过24时挤在一行
.el-row{ display:flex; flex-wrap: wrap; }
el-col和el-row结合el-form,位置错乱问题
el-row和el-col配合el-form 出现排版错乱
问题表现
el-col的内容为空,正常;el-col的内容不一样,回显时,有时正常,有时错乱
问题原因
el-row和el-col的中的span元素之和超过了24的时候,就会出现排版错乱(可见elemet官网,栅格布局方式)
错误代码结构
修改结构
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。