远程搜索组件(elementUI)

elementUI提供了远程搜索，然而这种模糊搜索在一个地方出现次数过多，比如搜索条件，新增弹框中，如果都按照官网的方式去写就难免很复杂，那就需要封装。

<template>
<el-select v-model="selectVal" filterable remote :placeholder="placeholder" :remote-method="remoteMethod" :loading="loading"   :disabled="disabled" @focus="clearPreList" @change="selectChange">
  <el-option v-for="item in list" :key="item[itemValue]" :label="item[itemLabel]" :value="item[itemValue]">
  </el-option>
</el-select>
</template>

<script>
// axios请求路径
import * as url from '../config/urlConfig'
export default {
 name: 'ReomteSelect ',
  props: {
    value: {
      type: String,
      default: ''
    },
    itemLabel: { // 选项绑定的字段
      type: String,
      default: 'storeName'
    },
    itemValue: {
      type: String,
      default: 'storeCode'
    },
    placeholder: {
      type: String,
      default: '请输入门店'
    },
    URL: {
      type: String,
      default: url.STORE_QUERY_NAME
    },
    queryName: {
      type: String,
      default: 'storeName'
    },
    params: {
      type: Object,
      default: function () {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      timer: null,
      list: []
    }
  },
  methods: {
    selectChange (val) {
      let data = null
      if (val) {
        data = this.list.find((item) => {
          return item[this.itemValue] === val
        })
      }
      this.$emit('selectChange', data )
    },
    remoteMethod (query) {
      if (query !== '') {
        clearTimeout(this.timer)
        this.loading = true
        this.timer = setTimeout(() => {
          let queryParams = Object.assign({}, this.params, {
            [this.queryName]: query
          })
         // axios 请求
          this.$api.post(
            this.URL, queryParams,
            res => {
              this.loading = false
              this.list = res.repData
            },
            err => {
              this.loading = false
              this.list = []
            }
          )
        }, 500)
      } else {
        this.list = []
      }
    },
    clearListData () {
      this.list = []
    },
    // 情况备选项
    clearPreList () {
      if (!this.selectVal) {
        this.list = []
      }
    }
  },
  computed: {
    selectVal: {
      get: function () {
        return this.value
      },
      set: function (newValue) {
        this.$emit('input', newValue)
      }
    }
  }
}
</script>

使用方式
引入组件使用，可全局注册也可局部注册

import ReomteSelect from '@/components/ReomteSelect'

 <el-form-item label="门店" prop="mendian">
     <reomte-select 
	     v-model="searchForm.mendian"
	      placeholder="请输入门店名称">
	  </reomte-select>
  </el-form-item>