<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
//VUE+elementUI想实现选择下拉框输入框必填，选择facebook联系人必填，选择非facebook邮箱和订单号二选一必填，请问代码怎么改
new Vue({
el: '#app',
data() {
return {
ruleForm: {
name: undefined,
region: undefined,
email:undefined,
order:undefined
}
};
},
computed: {
nameMust: function () {
return this.ruleForm.region == `facebook`;
},
emailMust:function(){
return this.ruleForm.region !== `facebook`;
},
orderMust:function(){
return this.ruleForm.region !== `facebook`;
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log(`已提交表单`);
} else {
console.log("error submit!!");
return false;
}
});
}
},
template: `<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
<el-form-item label="联系人" prop="name" :required="nameMust">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email" :required="emailMust">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="订单号" prop="order" :required="orderMust">
<el-input v-model="ruleForm.order"></el-input>
</el-form-item>
<el-form-item label="联系渠道" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选联系渠道" style="width:100%">
<el-option label="facebook" value="facebook"></el-option>
<el-option label="amazon" value="amazon"></el-option>
<el-option label="feedback" value="feedback"></el-option>
<el-option label="其他" value="else"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>`
})
</script>
</html>
分享
