远程搜索下拉选择

 <el-select

            v-model="addForm.merId"

            filterable

            remote

            :remote-method="remoteMethod"

            :loading="loading"

            @change="selectChanged"

            clearable

          >

            <el-option

              v-for="item in options"

              :key="item.value"

              :label="item.label"

              :value="item.value"

            >

            </el-option>

          </el-select>



   async remoteMethod(query) {

      this.loading = true;

      if (query !== "") {

        await this.$service.get(`/mer/list?name=${query}`).then((res) => {

          this.company = res.data.records;

        });

        this.company = this.company.map((item) => {

          return {

            value: `${item.id}`,

            label: `${item.name}`,

          };

        });

        this.loading = false;

        setTimeout(() => {

          this.options = this.company.filter((item) => {

            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;

          });

        }, 200);

      } else {

        this.options = [];

      }

    },

   // 选中后的处理

    selectChanged(params) {

      this.addForm.merId = params;

    },