Layout 布局
ElementUI 的 Layout 布局系统基于 24 栏栅格设计，提供了灵活的响应式布局能力，适用于各种页面结构的构建。(CSDN)
📐 基础布局结构
ElementUI 的布局由 <el-row>（行）和 <el-col>（列）组成：(博客园)
vue
<el-row>
<el-col :span="12">列1</el-col>
<el-col :span="12">列2</el-col>
</el-row>:span属性表示该列占据的列数，总共 24 栏。- 上例中，每列占据 12 栏，合计 24 栏，刚好一行。(慕课网)
🔧 主要属性详解
1. gutter（列间距）
用于设置列之间的间距，单位为像素：(慕课网)
vue
<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（列偏移）
用于设置列的左侧偏移栏数，实现列的右移：(慕课网)
vue
<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 控制主轴对齐方式：(慕课网)
vue
<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）
用于设置不同屏幕尺寸下的列宽，实现响应式布局：(博客园)
vue
<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>上述代码中，列在不同屏幕宽度下占据不同的列数，实现了响应式布局。(慕课网)
🧩 综合示例：响应式三栏布局
vue
<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：绑定表单数据对象。
vue
<el-form :model="formData">其中，formData 是一个对象，包含表单字段及其初始值。(掘金)
rules：定义表单验证规则。(CSDN博客)
vue
<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博客)
校验规则示例
javascript
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
]
}上述规则表示：用户名字段为必填，且长度需在 3 到 15 个字符之间。
🎛️ 表单插槽详解
ElementUI 的表单组件支持插槽，允许开发者自定义表单项的内容和布局。
常用插槽
label插槽：自定义表单项的标签内容。
vue
<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)
vue
<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 需求。
📝 示例代码
vue
<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 表单组件的使用，建议参考以下资源：
如果您有特定的表单布局或验证需求，欢迎继续提问！