vue3中的el-select的远程搜索

50 阅读1分钟
 <el-select
      ref="headerSearchSelectRef"
      v-model="search"
      :remote-method="querySearch"
      filterable
      default-first-option
      remote
      placeholder="Search"
      class="header-search-select"
      @change="change"
    >
      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
      function querySearch(query) {
      if (query !== '') {
        options.value = fuse.value.search(query)
      } else {
        options.value = []
      }
    }
    function change(val) {
      const path = val.path;
      if (isHttp(path)) {
        // http(s):// 路径新窗口打开
        const pindex = path.indexOf("http");
        window.open(path.substr(pindex, path.length), "_blank");
      } else {
        router.push(path)
      }

      search.value = ''
      options.value = []
      nextTick(() => {
        show.value = false
      })
    }