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

el-select实现下拉框触底加载更多的更多相关文章

  1. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  2. 微信小程序采坑之上拉触底加载更多和下拉刷新

    小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...

  3. 实现select下拉框的无限加载(懒加载)

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  4. combotree -下拉框树异步加载

    问题: 下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载 方案: 点击事件加载:先加载部分,点击节点时再展开并追加子节点 onBeforeExpand事件:在展开树前加载,感觉这种方式比较优 ...

  5. 转:JQuery实现下拉框的数据加载和联动

    <script type="text/javascript"> $(document).ready(function() { GetByJquery(); $(&quo ...

  6. ajax实现下拉菜单无刷新加载更多

    $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...

  7. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  8. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  9. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. Maven中使用ssm框架出现:org.apache.tomcat.util.modeler.BaseModelMBean.invoke 调用方法[manageApp]时发生异常

    org.apache.tomcat.util.modeler.BaseModelMBean.invoke 调用方法[manageApp]时发生异常 首先可以排查一下像: @RequestMapping ...

  2. PerfView专题 (第十二篇):对 C# 下的 SDK 类库进行监控(大结局)

    一:背景 本篇是我们系列文章的最后一篇,前面的文章中大多是在 CLR Runtime 以及 OS 层面进行监控来发现各种可疑的程序问题,除了这两个层面,其实我们还可以对 SDK 中一些类进行洞察,比如 ...

  3. 简单创建一个SpringCloud2021.0.3项目(四)

    目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上三篇教程 3. 日志处理 1. 创建日志公共模块 2. Eureka引入日志模块 4. 到此的功能代码 5. 注册中心换成naco ...

  4. CF -1679C

    Problem - 1679C - Codeforces 题意:当t=1加入一个点,每个点可以影响一行和一列,t=2删除某个点,t=3判断这个矩形内的每个点是否都可以影响. 思路:开始时直接暴力,T了 ...

  5. 03 最小CMake项目

    03 最小CMake项目 所有CMake项目都从一个CMakeLists.txt文件开始,此文件应该放在源代码树的最顶层目录下.可以将CMakeLists.txt想象成CMake项目文件,定义了从源和 ...

  6. 《网页设计基础——HTML注释与CSS注释》

    网页设计基础--HTML注释与CSS注释       一.HTML注释: 格式: <!-- 在此处书写注释 --> 例如: <html> <head> <ti ...

  7. 腾讯云主机安全【等保三级】CentOS7安全基线检查策略

    转载自:https://secvery.com/8898.html 注意:注意,注意:处理前请先做备份,处理前请先做备份,处理前请先做备份 1.确保配置了密码尝试失败的锁定 编辑/etc/pam.d/ ...

  8. Gitlab备份以及恢复

    1.迁移准备工作和思路 从a服务器迁移到b服务器,由于Gitlab自身的兼容性问题,高版本的Gitlab无法恢复低版本备份的数据,需要注意在b服务器部署和a服务器一样版本的gitlab,部署好环境后开 ...

  9. 3.在 Kubernetes 上安装 Gitlab CI Runner

    结合文章:1. 在 Kubernetes 上安装 Gitlab ,地址:https://www.cnblogs.com/sanduzxcvbnm/p/13852854.html 总结: 结合开头的文章 ...

  10. Mapper 实体转换Entiy to Dto

    实际使用中发现很多问题 如果用EFcore 框架,这个表达式树生成一个新的实体导致EFcore 跟踪失败!/// <summary> /// 生成表达式目录树 泛型缓存 /// </ ...