el-autocomplete踩坑记录

需求：非必填项，若操作该项时，要求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;
}

如有好的方法，望不吝告知