2. 思路及实现
1. 表单验证
this.nameChangeTemp = Name;
通过rule对表单进⾏验证
以名字的验证为例
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）⼀种是1中验证的时候，然后验证通过设置标志位；
（2）通过change事件；
这⼉我们通过change事件完成
// 表单部分，以名称为例
<el-form-item label="名称" prop="orgName" ref="orgName">
<el-input v-model="Name" placeholder="请输⼊名称" :disabled="Name==='云课堂'" @change="nameChange"></el-input> </el-form-item>
......
// 事件驱动程序
nameChange () {
this.nameChangeMark = true;
},
codeChange () {
}
// 进⾏编辑时的请求，⾸先通过delete将这两个属性去掉，再根据标志位将对应的属性添加进来
let obj = deepClone(this.form) // 这⼉对表单⾥⾯的数据进⾏深度赋值
Name;
Code;
if (this.nameChangeMark) {
}
if (deChangeMark) {
}
putObj(obj).then(res => {
if (!res || res.status !== 200) {
this.$(ssage)
return
}
this.showValue();
this.$message({
message: '更新成功',
type: 'success'
});
});
