el-select实现下拉框触底加载更多

乎语百科 2022-11-14 12:45:46 272 0

当下拉框需要展示的数据有很多时，几千甚至上万条，一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话，不论是从接口还是前端，这个性能都不是很好，会造成下拉框初次打开时响应很慢，影响用户体验。

于是想给下拉框做一个类似分页请求的功能，目前使用的是element-ui，只有提供远程搜索功能，没有触底加载相关指令，所以准备写一个自定义指令。

Vue自定义指令简介：

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

注册自定义指令的两种方式：全局注册和局部注册，两种方式我都会演示一遍

一、全局注册

 1 Vue.directive('loadmore', {
 2    inserted: function (el, binding) {
 3        const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); // 获取下拉框元素
 5        dom.addEventListener('scroll', function () {   // 监听元素触底
 6           const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
 8           if (condition) {
 9             binding.value();
10           }
11        });
12    }
13 })

二、局部注册

 1 export default {
 2   directives: {  // 在组件中接受一个 directives 的选项
 3     loadmore: {
 4       inserted(el, binding) {
 5         const dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');  // 获取下拉框元素
 6         dom.addEventListener('scroll', function () {       // 监听元素触底
 7           const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
 8           if (condition) {
 9             binding.value();
10           }
11         });
12       },
13     },
14   },
15 }

使用方法：

不论全局注册还是局部注册之后，使用方式都是一样的，与v-model、v-if之类指令一致

<template>
  <el-select v-model="value" placeholder="请选择" v-loadmore="loadmore"> // 使用指令绑定事件
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
    methods:{
        loadmore(){
          // 当下拉框滚动且触底时，会触发此事件，可以在此处去请求下拉框分页数据
        }
    }
}
</script>

注：由于el-select有默认最大高度，所以第一页数据需要略微多几条，不然不会出现下拉框滚动条，也就触发不了触底事件。我看了下大概8条数据即可出滚动条

标签：