elementUI的下拉框

码畜也有梦想

已于 2023-05-09 08:59:20 修改

阅读量2.9k

点赞数 1

于 2023-05-08 16:01:50 首次发布

本文链接：https://blog.csdn.net/QinLaoDeMaChu/article/details/130557311

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js应用中使用ElementUI组件库创建一个下拉选择框，并进行数据绑定和条件禁用。同时，文章还涉及到表单验证，包括手机号和邮箱的正则表达式验证，确保用户输入的有效性。

摘要由CSDN通过智能技术生成

效果图：

在这里插入图片描述

代码：

<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>

代码解释：

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 变量）

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'
		          }
		        ]
		    },
		}
	}
}