element中关于el-autocomplete和validate规则trigger/change之间的问题

代码

<el-form :model="purchaseForm" :rules="rules" ref="purchaseForm">
        <el-form-item label="批准文号" prop="purId">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="purchaseForm.purId"
            :fetch-suggestions="querySearch"
            placeholder="输入批准文号"
            prop="purId">
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.name }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCheck('purchaseForm')">确认</el-button>
        </el-form-item>
      </el-form>
           

<script>
export default {
  name: "Son2Pur",
  data() {
    var validateId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("批准文号(H/B/S+2位生产编号+6位数字)"));
      } else {
        callback();
      }
    };

    return {
      purchaseForm: {
        purId: "",
      },
      druginfo: [],
      rules: {
        purId: [{ validator: validateId, change: "blur" }],
      }
    };
  },
  mounted() {
    this.druginfo = this.loadAll();
  },
  methods: {
    submitCheck: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.commit("activeAdd");
          this.$router.replace("/contral/son2purnext");
        } else {
          alert("请完整填写!!!");
          return false;
        }
      });
    },
    querySearch(queryString, cb) {
      var druginfo = this.druginfo;
      var results = queryString
        ? druginfo.filter(this.createFilter(queryString))
        : druginfo;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return druginfo => {
        return (
          druginfo.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    loadAll: function() {
      return [
        { value: "H20143140", name: "阿莫西林" },
        { value: "H20023191", name: "布洛芬" },
        { value: "H20173078", name: "头孢" },
        { value: "H20034006", name: "阿奇霉素片" },
        { value: "H45020401", name: "地塞米松片" },
        { value: "H20033442", name: "红霉素胶囊" }
      ];
    }
  }
};
</script>
           

问题

purId: [{ validator: validateId, change: "blur" }],
           

正常来说，这个规则里应该是触发器trigger，但配合el-autocomplete之后，应该改成change触发。

因为trigger触发方式判定是否失去焦点而change则更注重内容数据是否改变。

为trigger时

 为change时

另外

el-autocomplete的loadAll函数中返回的数值必须是以value为查找的key，如果你改成其他称呼比如DrugId、id等都无法正常显示数据

loadAll: function() {
      return [
        { value: "H20143140", name: "阿莫西林" },
        { value: "H20023191", name: "布洛芬" },
        { value: "H20173078", name: "头孢" },
        { value: "H20034006", name: "阿奇霉素片" },
        { value: "H45020401", name: "地塞米松片" },
        { value: "H20033442", name: "红霉素胶囊" }
      ];
    }