由于一直以来都是修改页面的部分内容
既然发现自己连一直在用的el-form的表单验证都不会
<el-dialog :title="上传文件对话框" width="40%" :visible.sync="upload_DialogVisible" :close-on-click-modal="false">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
//ref用于提交方法submitForm_upload中的表单验证 this.$refs[formName].validate((valid) => { });
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item>
<el-button :size="size" type="primary" @click="submitForm_upload('ruleForm')">提交</el-button>
//@click="submitForm_upload('ruleForm')"传数据data里的ruleForm给submitForm_upload()方法,
//使得
//submitForm(formName) {
//this.$refs[formName].validate((valid) => //});
//},
//resetForm(formName) {//forName是<el-button :size="size" type="primary" @click="submitForm_upload('ruleForm')">提交</el-button>传过来的
//this.$refs[formName].resetFields();
//}
//}
</el-form-item>
</el-form>
</el-dialog>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
}
}
}
}
</script>
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {//验证表单
if(valid){
this.$confirm('确认提交吗?','提示',{}).then(()=>{
let params = Object.assign({},this.ruleForm)//把数据给params this.$api.TestPage.updateExamstatus(params).then((res)=>{
if(res.code == 200) {
this.$message({ message: '操作成功', type: 'success' })
} else {
this.$message({message: '操作失败, ' , type: 'error'})
}
this.upload_DialogVisible = false//上传成功后不显示此对话框
this.$refs[formname].resetFields()//上传成功之后重置表单formname的数据
this.findPage(null)//上传成功之后调用显示页面的数据
})
})
}
});
},
}
}
注意点:
1<el-form></el-form>
的ref是需要有的,用于表单验证
2<el-form></el-form>
的:model是要有的,绑定表单form的数据,这里绑定的是:model="ruleForm"
3点击提交按钮的时候,需要调用方法,提示传数据给上传方法submitForm,
这里传的是数据ruleForm