element Select组件封装 下拉框加上滚动加载

本文是在element-ui的基础上优化的。
需要操作dom元素，去监听scroll事件，然后当下拉滚动触底就执行自己需要的代码操作。

引用文章: vue指令做滚动加载 监听等

这里我使用的是局部注册指令。

directives:{
        loadmore:{
            inserted: function (el,binding) {
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                
                SELECTWRAP_DOM.addEventListener('scroll', function() {
                    /*
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
                    const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
                    
                    if(CONDITION) {
                        binding.value();
                    }
                })
            }
        }
    },

子组件中全部代码：

<template>
<!-- inputSelect -->
  <div>
      <el-select
            v-model="currentValue"
            filterable
            remote
            reserve-keyword
            clearable
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="changeValue"
            v-loadmore='load'
            @focus="focusEvent">
            <el-option
                v-for="item in list"
                :key="item[keyValue]"
                :label="item[keyName]"
                :value="item[keyValue]">
            </el-option>
        </el-select>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    props:['value','keyName','Url','keyValue'],
    mounted(){
    },
    directives:{
        loadmore:{
            inserted: function (el,binding) {
                // 获取element-ui定义好的scroll盒子
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                
                SELECTWRAP_DOM.addEventListener('scroll', function() {
                    /*
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
                    const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
                    
                    if(CONDITION) {
                        binding.value();
                    }
                })
            }
        }
    },
    data(){
        return{
            list:[],
            loading:false,
            currentValue:this.value,
            currentPage:1,
            per_page:10,
            queryword:'',
            canmore:true,
        }
    },
    methods:{
        focusEvent(){
            this.queryword='';
            this.canmore=true;
            this.currentPage=1;
            this.loading = true;
            let data={
                page:this.currentPage,
                per_page:this.per_page,

            }
            axios.get(this.Url,{
                params: {
                    ...data
                },
            }).then(res=>{
                this.list=res.data.data;
                this.loading = false;
            })
        },
        remoteMethod(query){
            this.queryword=query;
            this.currentPage=1;
            if (query !== '') {
                this.loading = true;
                // 请求数据
                 let data={
                    page:this.currentPage,
                    per_page:this.per_page,
                }
                data[this.keyName]=query;
                axios.get(this.Url,{
                    params: {
                        ...data
                    },
                }).then(res=>{
                    this.list=res.data.data;
                    this.loading = false;
                })
            } 
        },
        changeValue(val){
            this.$emit('input',val);
        },
        load(){
            if(!this.canmore){
                return
            }
            this.currentPage++;
            // 请求数据
            let data={
                page:this.currentPage,
                per_page:this.per_page,
            }
            data[this.keyName]=this.queryword;
            axios.get(this.Url,{
                params: {
                    ...data
                },
            }).then(res=>{
                if(res.data.data.length>0){
                    this.list=this.list.concat(res.data.data);
                }else{
                    this.canmore=false;
                }
                
            })
            
        }
    }
}
</script>

<style>

</style>

父组件中的引用：

<template>
  <div>
        <div>

            <InputSelect v-model="Selectvalue" keyName='alphabetic_code' keyValue="id" Url='/api/tenant/currencies'></InputSelect>
            
        </div>
      
  </div>
</template>

<script>
import InputSelect from '../components/InputSelect'
 export default {
     components:{
         InputSelect
     },
    data() {
      return {
        Selectvalue:"",
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style>

</style>

最终效果：
下拉滚动请求，以及远程搜索选择。