### 关于 el-form-item 中设置 label 和 prop 属性 businessType 的示例 在 Vue.js 或 Element UI 开发中，`el-form-item` 是用于表单项的容器组件。通过其 `label` 属性可以定义该表单项的标签文字，而 `prop` 属性则绑定到父级 `el-form` 的模型对象中的某个字段。 以下是基于需求的一个完整示例代码： ```vue <template> <el-form :model="formModel" ref="formRef" label-width="120px"> <!-- 设置 label 为业务类型 --> <el-form-item label="业务类型" prop="businessType"> <el-select v-model="formModel.businessType" placeholder="请选择业务类型"> <el-option v-for="item in businessTypes" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> <!-- 其他表单项 --> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formModel: { businessType: '', // 初始值为空字符串 }, businessTypes: [ { value: 'typeA', label: '类型 A' }, { value: 'typeB', label: '类型 B' }, { value: 'typeC', label: '类型 C' }, ], }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { console.log('提交的数据:', this.formModel); } else { console.log('验证失败'); } }); }, }, }; </script> ``` #### 解析 - **`label` 属性**: 定义了表单项左侧显示的文字，在本例中设为了“业务类型”。 - **`prop` 属性**: 将当前表单项与 `el-form` 的模型对象 (`formModel`) 进行关联，具体绑定了 `businessType` 字段[^1]。 - **动态选项列表**: 使用了一个数组 `businessTypes` 来存储可能的业务类型及其对应的值和描述。这些数据可以通过接口获取或者硬编码实现。 - **校验逻辑**: 虽然未显式写出校验规则，但在实际开发中建议按照规范添加 Spring Validate 注解或其他前端校验机制来确保输入的有效性[^3]。 --- ###