vxe-select 实现远程搜索、服务端搜索功能

vxe-select 实现远程搜索、服务端搜索功能

通过参数 remote 和 filterable 启用后，配合 remote-method 实现远程搜索下拉选项功能

<template>
  <div>
    <vxe-select v-model="val1" placeholder="远程搜索" :options="opts1" :remote-config="remoteConfig" clearable filterable remote></vxe-select>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
  data () {
    const opts1 = []
    const remoteConfig = {}
    return {
      val1: null,
      opts1,
      idKey: 1,
      remoteConfig
    }
  },
  created () {
    this.remoteConfig = {
      queryMethod: ({ searchValue }) => {
        return new Promise(resolve => {
          setTimeout(() => {
            const list = XEUtils.range(0, XEUtils.random(1, 10)).map(() => {
              return {
                value: this.idKey++,
                label: `选项${this.idKey}_${searchValue}`
              }
            })
            this.opts1 = list
            resolve()
          }, 200)
        })
      }
    }
  }
}
</script>