el-select 远程搜索 实战 使用

 <el-form-item label="邮政编码" prop="zipCode">
      <el-select
        v-model="form.zipCode"
        remote
        clearable
        filterable
        reserve-keyword
        :remote-method="remoteMethod"
        placeholder="请选择"
        default-first-option
        @change="zipCodeChange"
      >
        <el-option
          v-for="item in candidates"
          :key="item.value"
          :label="item.countryCode + ' ' + item.state + ' ' + item.city + ' ' + item.zipCode"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>

return：{
     form: {
        countryCode: '',
        zipCode: '',
        province: '',
        city: '',
        address: '',
        address2: '',
        contacts: '',
        phone: '',
        company: ''
      },
      candidates: [],
      findItemCode: ''
}


methods:{
       remoteMethod (query) {
      if (!query || !this.form.countryCode) return (this.candidates = [])
      setTimeout(async () => {
        const res = await this.$request({
          url: `/deliverAddress/candidate?zipcode=` + query + '&countryCode=' + this.form.countryCode,
          method: 'get'
        })
        this.candidates = res.data
      }, 1500)
    },

    zipCodeChange (e) {
      if (!e) return
      let findItem = this.candidates.find((item) => item.id === e)
      if (!findItem) return this.$message.warning('发生未知错误，请重新选择！')
      this.findItemCode = findItem
      this.form.province = findItem.state
      this.form.city = findItem.city
    }
}