elementUI的下拉框

效果图：

代码：

<el-col:span="24"><el-form-itemlabel="组织负责人"prop="orgManagerId"><el-selectv-model="form.orgManagerId":disabled="isTopNode"><el-optionv-for="item in orgManagerOptions":key="item.orgManagerId":label="item.orgManagerName":value="item.orgManagerId"/></el-select></el-form-item></el-col>

代码解释：

• prop="orgManagerId"，对应下面代码里 rules 里的 orgManagerId，其中 required: true 对应效果图中的小红星
• <el-select>：表示使用了 Element UI 组件库中的下拉选择框组件。
• v-model="form.orgManagerId"：表示将选中的值双向绑定到 Vue 实例中 data 中的 form 对象的 orgManagerId 属性上。
• :disabled="isTopNode"：表示根据 isTopNode 变量的值来决定是否禁用下拉选择框。
• <el-option>：表示使用了 Element UI 组件库中的选项组件，用于渲染下拉列表中的每个选项。
• v-for="item in orgManagerOptions"：表示使用 v-for 指令循环遍历 orgManagerOptions 数组，将数组中的每个元素赋值给 item 变量。
• :key="item.orgManagerId"：表示为每个选项设置唯一标识符，以便 Vue 在更新 DOM 时能够正确识别每个选项。
• :label="item.orgManagerName"：表示将每个选项显示的文本内容设置为 orgManagerName 属性对应的值。
• :value="item.orgManagerId"：表示将每个选项实际传递给表单数据的值设置为 orgManagerId 属性对应的值。（意思就是选中某个下拉选项之后，是将 item.orgManagerId 值赋给 form.orgManagerId 变量）

exportdefault{data(){//手机号验证varcheckPhone=(rule,value,callback)=>{if(!value){callback();}else{const reg =/^1[3456789]\d{9}$/if(reg.test(value)){callback();}else{returncallback(newError('请输入正确的手机号'))}}}//邮箱验证varcheckEmail=(rule ,value,callback)=>{if(!value){callback()}else{const reg =/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;if(reg.test(value)){callback()}else{returncallback(newError('请输入正确的邮箱'))}}}return{// 表单参数form:{},// 表单校验rules:{orgManagerId:[{required:true,message:"请选择组织负责人",trigger:"blur"},],phone:[{validator:checkPhone,trigger:'blur'},],email:[{validator:checkEmail,trigger:'blur'}]},}}}