1. 效果
2. 思路及实现
- 表单验证
this.nameChangeTemp = response.data.orgName;
this.codeChangeTemp = response.data.orgCode;
rules: {
orgName: [
// 设置为必传
{ required: true, message: "请输入用户", trigger: 'blur' },
// 设置长短
{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: 'blur' },
// 通过方法进行验证
{ validator: validateIsReOrgName, trigger: 'blur' }
],
}
...
var validateIsReOrgName = (rule, value, callback) => {
let obj = {
orgName: value
}
// 如果没有发生编辑,那么就直接返回
if (value === this.nameChangeTemp) {
callback();
return
}
// 通过接口访问后台,然后确定通过后台的数据,判断是否重复
isNameDuplication(obj).then((res) => {
if (res.data) {
callback(new Error('机构重名,请重新输入'));
}
callback();
})
}
- 更新时,对输入框内容的处理
- 更新时,如果需要验证的内容没有发生改变,那么就不需要传到后台。
- 这儿有两种方式可以知道内容是否发生改变:
(1)一种是1中验证的时候,然后验证通过设置标志位;
(2)通过change
事件;
这儿我们通过change
事件完成
// 表单部分,以名称为例
<el-form-item label="名称" prop="orgName" ref="orgName">
<el-input v-model="form.orgName" placeholder="请输入名称" :disabled="form.orgName==='云课堂'" @change="nameChange"></el-input>
</el-form-item>
......
// 事件驱动程序
nameChange () {
this.nameChangeMark = true;
},
codeChange () {
this.codeChangeMark= true;
}
// 进行编辑时的请求,首先通过delete将这两个属性去掉,再根据标志位将对应的属性添加进来
let obj = deepClone(this.form) // 这儿对表单里面的数据进行深度赋值
delete obj.orgName;
delete obj.orgCode;
if (this.nameChangeMark) {
obj.orgName = this.form.orgName;
}
if (this.codeChangeMark) {
obj.orgCode = this.form.orgCode;
}
putObj(obj).then(res => {
if (!res || res.status !== 200) {
this.$message.error(res.message)
return
}
this.showValue();
this.$message({
message: '更新成功',
type: 'success'
});
});