javascript
<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="活动区域" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio :label="1">线上品牌商赞助</el-radio>
<el-radio :label="2">线下场地免费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动名称" prop="name" :required="this.ruleForm.resource === 1">
<el-input v-model="ruleForm.name" class="w-220"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="btn">提交</el-button>
</div>
</template>
<script>
export default {
data () {
// 触发校验
const validatePass = (rule, value, callback) => {
if (this.ruleForm.resource === 1 && !value) {
return callback(new Error('不能为空'));
} else {
callback()
}
}
return {
ruleForm: {
resource: '',
name: ''
},
rules: {
resource: [
{ required: true, message: '请选择', trigger: 'change' }
],
name: [
{ validator: validatePass, trigger: 'blur' }
]
}
}
},
methods: {
// 提交
btn () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log('成功')
}
})
}
}
}
</script>
<style>
</style>