Element UI远程搜索数据

近日遇到的需求，需要在输入框输入条件远程搜索服务端数据，Element的select组件正好可以满足此需求。
为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性。

<el-select
  v-model="value4"
  filterable
  remote
  placeholder="请输入客户名称查询"
  :remote-method="remoteMethod"
  @change="customerValue"
  :loading="loading">
  <el-option
    v-for="item in list"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

data () {
    
    
  return {
    
    
  	list: [], // 从服务器端请求的数据
    loading: false
  }
},
methods: {
    
    
  // 监听客户输入框，值改变的时候触发
    remoteMethod (query) {
    
    
      this.getCustomer(query) // 调用异步接口(自定义接口名)
      if (query !== '') {
    
    
        this.loading = true
        setTimeout(() => {
    
    
          this.loading = false
          this.list = this.list.filter(item => {
    
    
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
    
    
        this.list = []
      }
    },
}