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: "紅黴素膠囊" }
      ];
    }