### ElementUI 表单布局实现每行三个字段 #### 1. 基本原理 ElementUI 的表单布局主要依赖于其栅格系统（Grid System）。通过将 `el-col` 和 `el-row` 结合使用，可以轻松实现复杂的布局效果。对于每行显示三个表单项的需求，可以通过设置列宽比例来达成目标[^1]。 #### 2. 实现方法 以下是一个完整的示例代码，展示如何让每行显示三个表单项： ```html <template> <el-form :model="formData" label-width="80px"> <el-row :gutter="20"> <!-- 第一组 --> <el-col :span="8"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="年龄"> <el-input v-model="formData.age"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="性别"> <el-select v-model="formData.gender" placeholder="请选择"> <el-option label="男" value="male"></el-option> <el-option label="女" value="female"></el-option> </el-select> </el-form-item> </el-col> <!-- 第二组 --> <el-col :span="8"> <el-form-item label="邮箱"> <el-input v-model="formData.email"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="电话"> <el-input v-model="formData.phone"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="地址"> <el-input v-model="formData.address"></el-input> </el-form-item> </el-col> </el-row> </el-form> </template> <script> export default { data() { return { formData: { name: "", age: "", gender: "", email: "", phone: "", address: "" } }; } }; </script> ``` #### 3. 关键点解析 - **栅格系统**：`el-row` 定义了一行，`:gutter="20"` 设置了列之间的间距。`el-col` 定义了每一列的宽度，`:span="8"` 将整行分为三份，每一份占据三分之一的空间。 - **表单组件**：`el-form` 是表单的核心容器，`el-form-item` 包裹每一个表单项并提供标签支持，而 `el-input` 或其他输入控件则是具体的交互区域[^1]。 - **动态数据绑定**：通过 `v-model` 双向绑定表单数据到 Vue 数据对象中，便于后续操作和验证[^2]。 #### 4. 方法调用 除了静态布局外，还可以利用 ElementUI 提供的表单方法增强用户体验。例如，重置表单内容可按如下方式实现： ```javascript this.$refs["form"].resetFields(); ``` 该语句会清空所有绑定的数据，并恢复默认状态[^2]。 --- ### 总结 通过结合 ElementUI 的栅格系统与表单组件，能够快速构建美观且功能完善的多列表单布局。上述示例实现了每行三个字段的效果，同时也展示了如何动态绑定数据以及调用内置方法。