表单只有一个el-row其余全部由el-col 嵌套el-form-item 为什么也实现了一行一行的布局,el-eol不是划分列的吗
时间: 2024-01-09 07:05:21 浏览: 190
Ext中表单中各种组件的布局
`el-row` 和 `el-col` 是 Element UI 中用于布局的组件,它们通常用于网格布局。而 `el-form` 和 `el-form-item` 是用于表单布局的组件,它们有自己的布局方式。
`el-row` 和 `el-col` 是通过 `flex` 布局来实现网格布局的。在 `el-row` 中,每一个 `el-col` 组件都被分配了相等的宽度,因此它们可以实现一行显示多个列的效果。
而在表单布局中,`el-form` 组件默认的布局方式是垂直排列,即每个 `el-form-item` 组件占据一行。`el-form-item` 组件是通过设置 `display` 属性为 `block` 来实现垂直排列的。`el-form-item` 中的 `el-col` 是用于控制表单项中标签和输入框的宽度比例,它们不会影响表单项的垂直排列。
因此,如果你想要实现一行一行的表单布局,可以将每个表单项放在一个 `el-row` 中,然后在 `el-row` 中使用 `el-col` 来控制表单项的宽度。而 `el-eol` 则是 Element UI 中用于控制表单项之间是否换行的组件,它一般用于在表单项之间插入一些分隔符。
阅读全文