当前位置：首页 > news >正文

[低代码表单生成器设计基础]ElementUI中Layout布局属性Form表单属性详解

news 来源：原创 2025/6/6 6:49:31

Layout 布局

ElementUI 的 Layout 布局系统基于 24 栏栅格设计，提供了灵活的响应式布局能力，适用于各种页面结构的构建。(CSDN)

在这里插入图片描述

📐 基础布局结构

ElementUI 的布局由 <el-row>（行）和 <el-col>（列）组成：(博客园)

<el-row><el-col :span="12">列1</el-col><el-col :span="12">列2</el-col>
</el-row>

:span 属性表示该列占据的列数，总共 24 栏。
上例中，每列占据 12 栏，合计 24 栏，刚好一行。(慕课网)

🔧 主要属性详解

1. `gutter`（列间距）

用于设置列之间的间距，单位为像素：(慕课网)

<el-row :gutter="20"><el-col :span="8"><div class="grid-content"></div></el-col><el-col :span="8"><div class="grid-content"></div></el-col><el-col :span="8"><div class="grid-content"></div></el-col>
</el-row>

为了使 gutter 生效，需在 <el-col> 内部添加子元素，并为其设置背景色或边距等样式。(慕课网)

2. `offset`（列偏移）

用于设置列的左侧偏移栏数，实现列的右移：(慕课网)

<el-row><el-col :span="8" :offset="8"><div class="grid-content"></div></el-col>
</el-row>

上述代码中，列向右偏移了 8 栏。

3. `type` 与 `justify`（Flex 布局）

通过设置 type="flex" 启用 Flex 布局，并使用 justify 控制主轴对齐方式：(慕课网)

start：左对齐（默认）
center：居中对齐
end：右对齐
space-between：两端对齐，间距均等
space-around：每个元素两侧间距相等(博客园, 慕课网, 腾讯云)

<el-row type="flex" justify="center"><el-col :span="6"><div class="grid-content"></div></el-col>
</el-row>

4. 响应式属性（`xs`、`sm`、`md`、`lg`、`xl`）

用于设置不同屏幕尺寸下的列宽，实现响应式布局：(博客园)

xs：<768px
sm：≥768px
md：≥992px
lg：≥1200px
xl：≥1920px(腾讯云, 博客园, CSDN)

<el-row :gutter="10"><el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4"><div class="grid-content"></div></el-col>
</el-row>

上述代码中，列在不同屏幕宽度下占据不同的列数，实现了响应式布局。(慕课网)

🧩 综合示例：响应式三栏布局

<el-row :gutter="20"><el-col :xs="24" :sm="12" :md="8"><div class="grid-content">列1</div></el-col><el-col :xs="24" :sm="12" :md="8"><div class="grid-content">列2</div></el-col><el-col :xs="24" :sm="24" :md="8"><div class="grid-content">列3</div></el-col>
</el-row>

在小屏幕（如手机）下，三列垂直排列；在中等屏幕（如平板）下，两列并排，第三列换行；在大屏幕（如桌面）下，三列并排显示。

更多详细信息和示例代码，请参考 ElementUI 官方文档：https://element.eleme.io/#/zh-CN/component/layout(CSDN)

此外，以下文章提供了深入的讲解和实战示例，供您参考：

vue vue-element-ui组件layout布局
vue vue-element-ui组件layout布局系列学习(一)[通俗易懂]
element layout 布局组件详解-原创手记(博客园, 腾讯云, 慕课网)

如需进一步的帮助或有特定的布局需求，欢迎继续提问！

Form

ElementUI 的表单组件（el-form）提供了强大的表单构建和验证功能，主要通过 el-form、el-form-item 以及相关插槽来实现。以下是对这些组件及其属性的详细解析：
在这里插入图片描述

🧾 `el-form` 表单组件详解

el-form 是表单的容器组件，负责管理表单数据和验证规则。

主要属性

model：绑定表单数据对象。

  <el-form :model="formData">

其中，formData 是一个对象，包含表单字段及其初始值。(掘金)

rules：定义表单验证规则。(CSDN博客)

  <el-form :rules="formRules">

formRules 是一个对象，键为字段名，值为对应的验证规则数组。(CSDN博客)

label-width：设置标签的宽度，例如 '80px'。(vueblocks.github.io)
ref：用于在方法中引用表单实例，以调用如 validate()、resetFields() 等方法。(cloud.tencent.com)

常用方法

validate(callback)：对整个表单进行验证。(CSDN博客)
validateField(prop, callback)：对指定字段进行验证。
resetFields()：重置表单字段为初始值，并移除校验结果。(CSDN博客)
clearValidate(props)：移除表单项的校验结果。

🧩 `el-form-item` 表单项组件详解

el-form-item 用于包裹表单控件，并提供标签、校验等功能。

主要属性

label：设置表单项的标签文本。
prop：指定表单项对应的字段名，用于校验规则的匹配。

注意：prop 的值应与 model 中的字段名一致，以确保校验规则正确应用。(CSDN博客)
required：标记该字段为必填项。
rules：为当前表单项单独定义验证规则，优先级高于 el-form 的 rules 属性。(CSDN博客)

校验规则示例

rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }]
}

上述规则表示：用户名字段为必填，且长度需在 3 到 15 个字符之间。

🎛️ 表单插槽详解

ElementUI 的表单组件支持插槽，允许开发者自定义表单项的内容和布局。

常用插槽

label 插槽：自定义表单项的标签内容。

  <el-form-item><template #label><span style="color: red;">*</span>用户名</template><el-input v-model="formData.username"></el-input></el-form-item>

默认插槽：自定义表单项的输入控件。(vueblocks.github.io)

  <el-form-item label="性别"><template #default><el-radio-group v-model="formData.gender"><el-radio label="male">男</el-radio><el-radio label="female">女</el-radio></el-radio-group></template></el-form-item>

通过插槽，可以灵活地定制表单项的展示内容，满足复杂的 UI 需求。

📝 示例代码

<template><el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px"><el-form-item label="用户名" prop="username"><el-input v-model="formData.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="formData.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {formData: {username: '',password: ''},formRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}};},methods: {submitForm() {this.$refs.formRef.validate((valid) => {if (valid) {// 提交表单} else {console.log('表单验证失败');return false;}});},resetForm() {this.$refs.formRef.resetFields();}}
};
</script>

上述示例展示了一个基本的登录表单，包括用户名和密码字段，并实现了表单的验证和重置功能。

如需进一步了解 ElementUI 表单组件的使用，建议参考以下资源：