### 使用 `el-form` 和 `el-form-item` 实现搜索框和下拉菜单的功能 在 Vue 中使用 Element UI 的 `el-form` 和 `el-form-item` 可以轻松实现带有验证功能的表单组件。以下是通过 `el-form` 和 `el-form-item` 来创建一个包含搜索框和下拉菜单的示例。 #### 示例代码 ```html <template> <div class="form-container"> <!-- 定义 el-form --> <el-form :model="formData" ref="ruleFormRef" :rules="rules" label-width="100px"> <!-- 搜索框 --> <el-form-item label="关键词：" prop="keyword"> <el-input v-model="formData.keyword" placeholder="请输入关键词"></el-input> </el-form-item> <!-- 下拉菜单 --> <el-form-item label="地区：" prop="region"> <el-select v-model="formData.region" placeholder="请选择地区"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </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> </div> </template> <script> export default { data() { return { formData: { keyword: '', // 搜索关键字 region: '' // 地区选项 }, rules: { keyword: [ { required: true, message: '请输入关键词', trigger: 'blur' } ], region: [ { required: true, message: '请选择地区', trigger: 'change' } ] } }; }, methods: { submitForm() { this.$refs.ruleFormRef.validate((valid) => { if (valid) { alert('提交成功！'); } else { console.log('验证失败'); return false; } }); }, resetForm() { this.$refs.ruleFormRef.resetFields(); } } }; </script> <style scoped> .form-container { max-width: 400px; margin: 0 auto; } </style> ``` --- 上述代码实现了以下功能： - **搜索框**：通过 `<el-form-item>` 配合 `prop="keyword"` 属性来绑定校验规则，确保用户必须填写搜索关键词[^3]。 - **下拉菜单**：利用 `<el-select>` 和 `<el-option>` 构建了一个简单的下拉列表，并设置了必填项校验。 - **表单校验**：通过 `:rules` 属性定义了两个字段的校验逻辑，分别针对输入框 (`trigger='blur'`) 和下拉菜单 (`trigger='change'`) 设置不同的触发方式。 - **方法支持**：提供了 `submitForm` 方法用于提交表单并执行校验；以及 `resetForm` 方法清空表单内容。 此代码片段展示了如何基于 `el-form` 动态渲染数据并与业务需求相结合的方式[^1]。 --- ####