需求:非必填项,若操作该项时,要求id不存在时无法提交
踩坑一:增加blur事件,若id不存在时清空输入内容;当时想法时,触发时清空输入框,此时就不需要在提交时判断并提示了
存在问题:该方法导致选中数据未回显
//html部分
<el-col :md="12" :lg="8" :xl="6">
<el-form-item label="结算单位" prop="settleId">
<el-autocomplete
ref="autoInput"
class="inline-input"
@select="selectAccount"
@blur="settleInput"
v-model="formData.settleName"
:fetch-suggestions="querySearchAccount"
placeholder="请输入结算单位"
></el-autocomplete>
</el-form-item>
</el-col>
//method部分
//远程搜索
restaurantsAccount = [];
public timeout: any;
public async querySearchAccount(queryString, cb) {
await Api.GetSettle({ count: -1, skip: 0, name: queryString }).then((res) => {
for (var i = 0; i < res.data.length; i++) {
res.data[i].value = res.data[i].name;
}
this.restaurantsAccount = res.data;
});
cb(this.restaurantsAccount);
}
selectAccount(item) {
this.formData.settleId = item.id;
}
settleInput() {
if (!this.formData.settleId) {
this.formData.settleName = '';
}
}
踩坑二:每次检索时先清空id,提交时再判断id不存在&&name存在时,给出提示信息;上代码
存在问题:编辑时,如果该项已有数据,输入框存在焦点就会将id清空,导致原有数据失效;用户使用存在影响
public async querySearchAccount(queryString, cb) {
this.formData.settleId = ''; //检索前清空id
await Api.GetSettle({ count: -1, skip: 0, name: queryString }).then((res) => {
for (var i = 0; i < res.data.length; i++) {
res.data[i].value = res.data[i].name;
}
this.restaurantsAccount = res.data;
});
cb(this.restaurantsAccount);
}
//提交时判断
if (this.formData.settleId == '' && this.formData.settleName != '') {
this.$message.error('结算单位不存在');
return;
}
目前解决方法:使用input事件,用户在输入时触发该事件,并将id清空,提交时再判断id不存在&&name有值时给出提示
//html部分
<el-col :md="12" :lg="8" :xl="6">
<el-form-item label="结算单位" prop="settleId">
<el-autocomplete
ref="autoInput"
class="inline-input"
@select="selectAccount"
@input="settleInput"
v-model="formData.settleName"
:fetch-suggestions="querySearchAccount"
placeholder="请输入结算单位"
></el-autocomplete>
</el-form-item>
</el-col>
//method部分
//远程搜索
restaurantsAccount = [];
public timeout: any;
public async querySearchAccount(queryString, cb) {
await Api.GetSettle({ count: -1, skip: 0, name: queryString }).then((res) => {
for (var i = 0; i < res.data.length; i++) {
res.data[i].value = res.data[i].name;
}
this.restaurantsAccount = res.data;
});
cb(this.restaurantsAccount);
}
selectAccount(item) {
this.formData.settleId = item.id;
}
settleInput() {
this.formData.settleId = '';
}
//提交时判断
if (this.formData.settleId == '' && this.formData.settleName != '') {
this.$message.error('结算单位不存在');
return;
}
如有好的方法,望不吝告知