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

Layout 结构

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

---

📐 基础结构结构

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

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

复制代码

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

---

🔧 紧张属性详解

1. gutter（列间距）

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

1. <el-row :gutter="20">
2.   <el-col :span="8"><div class="grid-content"></div></el-col>
3.   <el-col :span="8"><div class="grid-content"></div></el-col>
4.   <el-col :span="8"><div class="grid-content"></div></el-col>
5. </el-row>

复制代码

为了使 gutter 收效，需在 <el-col> 内部添加子元素，并为其设置背景色或边距等样式。(慕课网)
2. offset（列偏移）

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

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

复制代码

上述代码中，列向右偏移了 8 栏。
3. type 与 justify（Flex 结构）

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

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

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

复制代码

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

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

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

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

复制代码

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

---

🧩 综合示例：相应式三栏结构

1. <el-row :gutter="20">
2.   <el-col :xs="24" :sm="12" :md="8">
3.     <div class="grid-content">列1</div>
4.   </el-col>
5.   <el-col :xs="24" :sm="12" :md="8">
6.     <div class="grid-content">列2</div>
7.   </el-col>
8.   <el-col :xs="24" :sm="24" :md="8">
9.     <div class="grid-content">列3</div>
10.   </el-col>
11. </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：绑定表单数据对象。
  

1.   <el-form :model="formData">

复制代码

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

• rules：界说表单验证规则。(CSDN博客)
  

1.   <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博客)
  

校验规则示例

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

复制代码

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

---

🎛️ 表单插槽详解

ElementUI 的表单组件支持插槽，允许开发者自界说表单项的内容和结构。
常用插槽

• label 插槽：自界说表单项的标签内容。
  

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

复制代码

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

1.   <el-form-item label="性别">
2.     <template #default>
3.       <el-radio-group v-model="formData.gender">
4.         <el-radio label="male">男</el-radio>
5.         <el-radio label="female">女</el-radio>
6.       </el-radio-group>
7.     </template>
8.   </el-form-item>

复制代码

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

---

📝 示例代码

1. <template>
2.   <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
3.     <el-form-item label="用户名" prop="username">
4.       <el-input v-model="formData.username"></el-input>
5.     </el-form-item>
6.     <el-form-item label="密码" prop="password">
7.       <el-input type="password" v-model="formData.password"></el-input>
8.     </el-form-item>
9.     <el-form-item>
10.       <el-button type="primary" @click="submitForm">提交</el-button>
11.       <el-button @click="resetForm">重置</el-button>
12.     </el-form-item>
13.   </el-form>
14. </template>
16. <script>
17. export default {
18.   data() {
19.     return {
20.       formData: {
21.         username: '',
22.         password: ''
23.       },
24.       formRules: {
25.         username: [
26.           { required: true, message: '请输入用户名', trigger: 'blur' }
27.         ],
28.         password: [
29.           { required: true, message: '请输入密码', trigger: 'blur' }
30.         ]
31.       }
32.     };
33.   },
34.   methods: {
35.     submitForm() {
36.       this.$refs.formRef.validate((valid) => {
37.         if (valid) {
38.           // 提交表单
39.         } else {
40.           console.log('表单验证失败');
41.           return false;
42.         }
43.       });
44.     },
45.     resetForm() {
46.       this.$refs.formRef.resetFields();
47.     }
48.   }
49. };
50. </script>

复制代码

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

---

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

• ElementUI 官方文档 - 表单组件
  
• ElementUI 表单验证详解 - 知乎专栏
  

如果您有特定的表单结构或验证需求，欢迎继续提问！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告