element如何实现input输入与下拉滚动加载效果

需求如图：

 第一个想到的是利用input的自定义模板+远程搜索来实现。也就是借助这个组件：

<el-autocomplete></el-autocomplete>但发现在做滚动加载的时候不好实现。后来把目标瞄向了select组件。看到网上有实例，通过一个一个自定义指令判断是否滚动到顶部。然后再做加载。经过尝试发现可以解决问题：

step1：

写一个自定义指令：（我的实例中该自定义指令放在main.js同级目录下）directives.js

import Vue from 'vue'
let sDirective = {}
export default sDirective.install = function(vue, options) {
  Vue.directive('loadmore', {
    bind (el, binding) {
      const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      selectDom.addEventListener('scroll', function () {
        console.log("isEnd")
        const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
        
        if (isEnd) {
          binding.value()
        }
      })
    }
  })
}

step2:

在main.js中引入并注册（或者在要使用的页面中引入注册也可以）

import Vue from 'vue'
Vue.use(directives)
import "@/style/icon/iconfont.css"
import "@/style/app.css"
new Vue({
    el:"#app",
    ...
})

 step:在页面中使用 ：

  

<template>
<div class="search-wrap">
          <div class="search-ipt-element">
            <div class="search-prepend">
              <div class="search-prepend-inner">
                <span>
                  <i
                    class="el-icon-map-location fs20 theme-color"
                    @click="showCityFlag=true"
                  />
                </span>
                <span class="city-name">{{ curCity }}</span>
              </div>
            </div>
            <el-select
              class="input-select-ele"
              v-model="query.searchName"
              clearable
              filterable
              remote
              v-loadmore="loadmore"
              :remote-method="remoteSearch"
              placeholder="搜索小区名称/地址"
            >
              <el-option
                v-for="item in communityList"
                :key="item.value"
                :label="item.name"
                :value="item.code"
                @click.native="handleSelect(item)"
              >
                <div class="search-key-item">
                  <div class="search-key-item-tag-wrap">
                    <span class="search-key-item-tag"> {{ item.type }}</span>
                  </div>
                  <div class="search-key-item-cont">
                    <div class="search-key-item-title">
                      {{ item.name }}
                    </div>
                    <div class="search-key-item-sub">
                      {{ item.address }}
                    </div>
                  </div>
                  <div class="search-key-item-num">
                    {{ item.houseTypeCount }}个户型
                  </div>
                </div>
              </el-option>
              <p
                class="loading-txt"
                v-if="loading"
              >
                <i class="el-icon-loading"></i>
                玩命加载中...
              </p>
            </el-select>
            <div
              class="append-btn"
              @click="querySearch"
            >搜索</div>
          </div>
        </div>
</template>
<script>

export default{
    
data(){
    return{
         loading: false,
         query: {
            searchName: "",
            cityId: "",
            isMatchAddr: true,
            pageNo: 1,
            pageSize: 20,
          },
    }
},
watch: {
    "query.searchName": {
      handler(newVal, oldVal) {
        this.querySearch();
      },
      deep: true,
    },
},
methods:{
     querySearch() {
          getCommunityList(this.query)
            .then((res) => {
          this.communityList = res.data.list || [];
        })
        .catch((err) => {
          throw new Error(err);
        });
     },
     loadmore() {
          this.query.pageNo++;
          this.loading = true;
          getCommunityList(this.query).then((res) => {
              this.loading = false;
              if (this.communityList.length == res.data.total) {
                return;
              } else {
                let list = res.data.list || [];
                this.communityList = this.communityList.concat(list);
              }
          }).catch((err) => {});
     }

    }

}

</script>

通过这样曲线救国就可以实现这个效果