el-select实现下拉框触底加载更多
当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 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条数据即可出滚动条