Element UI remote search data

The demand encountered recently requires the remote search of data on the server side by inputting conditions in the input box, and the select component of Element can meet this demand.
In order to enable remote search, you need to set filterable and remote to true, and pass in a remote-method. remote-method is a Function, it will be called when the input value changes, and the parameter is the current input value. It should be noted that if the el-option is rendered through the v-for command, you need to add a key attribute to the el-option at this time, and its value must be unique.

<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 = []
      }
    },
}