效果图:
代码:
<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'
}
]
},
}
}
}