1、写入HTML
<el-form :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm">
<el-form-item label="文档部门" prop="archiveApartment">
<el-input v-model="pageForm.archiveApartment" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="文档标签" prop="archiveNature">
<el-input v-model="pageForm.archiveNature" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="文档名称" prop="archiveName">
<el-input v-model="pageForm.archiveName" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="保密等级" prop="archiveLevel">
<el-input v-model="pageForm.archiveLevel" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="文档位置" prop="archivePosition">
<el-input v-model="pageForm.archivePosition" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.createTime">
</el-date-picker>
</el-form-item>
<el-form-item label="更新时间">
<el-date-picker type="datetime" placeholder="更新时间" v-model="pageForm.updateTime">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog‐footer">
<el-button type="primary" @click="editSubmit" >提交</el-button>
<el-button type="primary" @click="go_back" >返回</el-button>
</div>
2、写入data
pageFormRules: {
archiveApartment:[
{required: true, message: '请选择部门', trigger: 'blur'}
],
archiveNature:[
{required: true, message: '请选择标签', trigger: 'blur'}
],
archiveName: [
{required: true, message: '请输入文档名称', trigger: 'blur'}
],
archiveLevel: [
{required: true, message: '请输入文档保密等级', trigger: 'blur'}
],
archivePosition: [
{required: true, message: '请输入文档位置', trigger: 'blur'}
],
},
3、写入methods
editSubmit(){
this.$refs.pageForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
cmsApi.page_edit(this.id,this.pageForm).then((res) => {
console.log(res);
if(res.success){
this.$message({
message: '修改成功',
type: 'success'
});
//自动返回
this.go_back();
}else{
this.$message.error('修改失败');
}
});
});
}
});
},
4、总结
触发Rules的情况
- 当不符合规则时会提示用户
- 当直接提交会触发规则
点击保存时
当提交保存单据的时候会校验参数框里的参数是否符合
如果符合那么回调函数中返回的Valid为ture否则为false