场景:当在使用el-form绘制表单时,明明所有样式都书写正确,就是不明白为何form与底下其他组件会出现距离过宽的状况,且调试时一直定位不到。反复检查代码并结合调试才发现,在el-form里面给其中一个el-form-item内的el-button用到了v-if,导致el-button在没有显示的情况下,el-form-item却有自己的样式并且显示出来了,因此影响了整体布局。
注意:在使用el-form表单时,若想控制el-form内的某个表单项el-form-item的显示与隐藏,需要将隐藏条件放在el-form-item中,不能放在el-form-item的内容中,否则只是el-form-item中的内容没有显示,而el-form-item仍会显示并占内容,且有它自己的样式,这样会影响整体布局。例如:
将 v-if="isShow" 放在button里面,是错误的,这样会导致el-form-item仍显示从而影响我们想要的目标布局
应改成以下这种写法: