element-plus远程搜索

1，准备模板

 <el-select v-model="location" :filterable="true" :remote="true" 
          placeholder="地点查询" :remote-method="remoteMethod" :loading="loading" 
          clearable @change="getLocation">
     <el-option v-for="item in options" :key="item.name" :label="item.name" 
               :value="item.name" class="datepick">
              <div>{{ item.name }}</div>
              <div class="labelStyle">{{ item.adname }}</div>
     </el-option>
 </el-select>

2，js逻辑部分

    getLocation() {
      this.states.forEach((i) => {
        if (i.name == this.location) {
          let result = wgs84_to_gcj02(i.longitude, i.latitude)
          this.map.panTo([result[1], result[0]])
        }
      })
    },
    remoteMethod(query) {
      if (query) {
        this.keyInfo.keyword = query
        this.loading = true
        setTimeout(async () => {
          this.loading = false
          const res = await queryByKey(this.keyInfo)
          if (res.code != 0) {
            return this.$message.error(res.message)
          }
          this.states = res.data
          this.options = this.states.map(item => {
            return { name: `${item.name}`, adname: `${item.adname}` }
          })
        }, 200)
      } else {
        this.options = []
      }
    },