Bootstrap

vue2:如何动态控制el-form-item之间的行间距

需求

某页面有查看和编辑两种状态:

编辑:

查看:

可以看到,查看时,行间距太大导致页面不紧凑,所以希望缩小查看是的行间距。

行间距设置

行间距通常是通过 CSS 的 margin 或 padding 属性来控制的。在 Element UI 的样式表中,.el-form-item 的下边距(margin-bottom)通常被设置为 20px,这可以视为一种“行间距”。

.el-form-item {
  margin-bottom: 20px;
}

所以要缩小行间距,就要改变这个值,但是又不希望改变编辑状态的默认值,所以,使用动态class,如下:

;