在 Element Plus 或 Element UI 中，`el-form-item` 的设计初衷是针对单个字段进行校验。如果需要在一个 `el-form-item` 标签中放置多个字段并同时校验这些字段是否必填，可以通过以下方式实现： 1. **自定义校验规则**：通过编写自定义校验函数来检查多个字段。 2. **组合字段校验**：将多个字段的值组合到一个逻辑单元中进行校验。 以下是实现的完整示例： --- ### 示例代码 ```vue <template> <el-form :model="form" :rules="rules" ref="formRef" label-width="100px"> <!-- 多字段校验 --> <el-form-item label="用户名和邮箱" prop="userAndEmail"> <el-row :gutter="20"> <el-col :span="11"> <el-input v-model="form.username" placeholder="请输入用户名"></el-input> </el-col> <el-col :span="2">和</el-col> <el-col :span="11"> <el-input v-model="form.email" placeholder="请输入邮箱"></el-input> </el-col> </el-row> </el-form-item> <!-- 提交按钮 --> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { // 自定义校验规则：同时校验用户名和邮箱是否为空 const validateUserAndEmail = (rule, value, callback) => { if (!this.form.username || !this.form.email) { callback(new Error('用户名和邮箱都为必填项')); } else { callback(); } }; return { form: { username: '', // 用户名 email: '' // 邮箱 }, rules: { userAndEmail: [ { validator: validateUserAndEmail, trigger: 'blur' } // 自定义校验规则 ] } }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { alert('表单校验通过!'); } else { console.log('表单校验失败'); return false; } }); } } }; </script> ``` --- ### 上述代码解释 1. **模板部分**： - 使用了 `el-form` 组件，并绑定 `form` 数据模型和 `rules` 校验规则。 - 在一个 `el-form-item` 标签中放置了两个字段（用户名和邮箱），通过 `el-row` 和 `el-col` 布局组件将它们排列在同一行。 - `prop` 属性指向 `userAndEmail`，这是自定义校验规则的字段名。 2. **脚本部分**： - 定义了 `form` 数据模型，包含两个字段：`username`（用户名）和 `email`（邮箱）。 - 定义了 `rules` 校验规则： - `userAndEmail` 使用了自定义校验规则 `validateUserAndEmail`。 - 自定义校验规则 `validateUserAndEmail`： - 如果 `username` 或 `email` 为空，则提示“用户名和邮箱都为必填项”。 - 如果两者都不为空，则调用 `callback()` 表示校验成功。 - `submitForm` 方法调用 `this.$refs.formRef.validate` 进行表单校验，校验通过后弹出提示框。 3. **校验规则**： - `validator` 定义了自定义校验函数。 - `trigger` 定义了触发校验的时机（如 `blur` 表示失去焦点时触发）。 4. **布局调整**： - 使用 `el-row` 和 `el-col` 组件对多个字段进行布局，确保它们在同一行显示。 --- ###