涉及属性



isResponsive

是否开启响应式宽度,默认为 true,当指定为false时,则响应式无效


inline


inline 为true时,即inline模式下,响应式自动无效


labelPosition

默认按照响应式处理,如果需要指定,可以传递left, right, top 三种值, 具体请参考 element-ui form


span

默认按照响应式处理,如果需要指定, 可以传递 1-24 ,请参考 element-form layout


响应式处理规则

当为响应式时,labelPositionspan 的处理规则如下:


width 指表单的包裹元素宽度


例子1:在 1300px  时指定  labelPosition  为 top , span 等于 22 :


<ele-form
  v-model="formData"
  :form-desc="formDesc"
  :span="22"
  labelPosition="top"
></ele-form>


按照指定的大小和标签位置显示

image.png


例子2:当在 1300px  时什么都不指定:


<ele-form
  v-model="formData"
  :form-desc="formDesc"
></ele-form>


按照响应式显示

image.png