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 setup>
import { ref } from 'vue'
import XEUtils from 'xe-utils'

const val1 = ref()
const opts1 = ref([])
let idKey = 1

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