element -select选择器实现远程模糊搜索

1、element select选择器文档

Element - The world's most popular Vue UI framework

2、效果如何：

 3、将该功能封装成组件，代码如下：

<template>
  <div class="courts-select">
    <!-- 模糊搜索 -->
    <el-select
      v-model="filterValue"
      clearable
      filterable
      remote
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :no-data-text="noMatchText"
      @change="filterChange"
      :loading="loading"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :value="item.code"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { listApi } from "@/api/systemManage.js";
var lodash = require("lodash");
export default {
  name: "",
  data() {
    return {
      options: [],
      filterValue: "",
      loading: false,
      noMatchText: "暂无数据"
    };
  },
  props: {
    list: Array,
    placeholder: {
      type: String,
      default: "请输入xxx"
    }
  },
  methods: {
    // 模糊搜索
    remoteMethod: lodash.debounce(function (query) {
      let resultAll = [];
      if (query) {
        this.loading = true;
        this.list.forEach((item) => {
          if (item.name.indexOf(query) >= 0) {
            resultAll.push(item);
          }
        });
        if (resultAll.length > 40) {
          this.courtOptions = [];
          this.noMatchText = "请输入详细的xxx";
          this.loading = false;
        } else if (resultAll.length === 0) {
          this.noMatchText = "暂无数据";
          this.loading = false;
        } else {
          this.options = resultAll;
          this.loading = false;
        }
      }
    }, 300),

    // 树的模糊查询选择
    filterChange(e) {
       this.$emit("getSelectedCourt", e);
       this.filterValue = e;
       this.options = [];
    }
  }
};
</script>

4、组件的引入和使用

<courtsSelect :list="list" @getSelectedCourt="getSelectedCourt"></courtsSelect>

    getSelectedCourt(e) {
      this.xxx = e
    },