elementUI drop-down box

Rendering:

Code:

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

Code explanation:

• prop="orgManagerId", corresponding to the orgManagerId in the rules in the code below, where required: truecorresponds to the little red star in the renderings
• <el-select>: Indicates that the drop-down selection box component in the Element UI component library is used.
• v-model="form.orgManagerId": Indicates that the selected value is bidirectionally bound to the orgManagerId attribute of the form object in data in the Vue instance.
• :disabled="isTopNode": Indicates whether to disable the drop-down selection box based on the value of the isTopNode variable.
• <el-option>: Indicates that the option component in the Element UI component library is used to render each option in the drop-down list.
• v-for="item in orgManagerOptions": Indicates using the v-for instruction to loop through the orgManagerOptions array and assign each element in the array to the item variable.
• :key="item.orgManagerId": Indicates setting a unique identifier for each option so that Vue can correctly identify each option when updating the DOM.
• :label="item.orgManagerName": Indicates that the text content displayed for each option is set to the value corresponding to the orgManagerName attribute.
• :value="item.orgManagerId": Indicates that the value actually passed to the form data for each option is set to the value corresponding to the orgManagerId attribute. (This means that after selecting a drop-down option, the item.orgManagerId value is assigned to the form.orgManagerId variable)

export default {
    
     
	data() {
    
    
		//手机号验证
	    var checkPhone = (rule,value,callback) =>{
    
    
	      if(!value) {
    
    
	        callback();
	      } else {
    
    
	        const reg = /^1[3456789]\d{9}$/
	        if(reg.test(value)) {
    
    
	          callback();
	        } else {
    
    
	          return callback(new Error('请输入正确的手机号'))
	        }
	      }
	    }
	    //邮箱验证
	    var checkEmail = (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 {
    
    
	          return callback(new Error('请输入正确的邮箱'))
	        }
	      }
	    }
		return {
    
    
			// 表单参数
      		form: {
    
    },
      		// 表单校验
		    rules: {
    
    
		        orgManagerId: [
		          {
    
     required: true, message: "请选择组织负责人", trigger: "blur" },
		        ],
		        phone :[
		          {
    
    
		            validator:checkPhone,trigger:'blur'
		          },
		        ],
		        email :[
		          {
    
    
		            validator:checkEmail,trigger:'blur'
		          }
		        ]
		    },
		}
	}
}