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条数据即可出滚动条
el-select实现下拉框触底加载更多的更多相关文章
- 在element-ui的select下拉框加上滚动加载
在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...
- 微信小程序采坑之上拉触底加载更多和下拉刷新
小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...
- 实现select下拉框的无限加载(懒加载)
在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...
- combotree -下拉框树异步加载
问题: 下拉树数据比较多时,全加载会产生页面延迟,需要实现异步加载 方案: 点击事件加载:先加载部分,点击节点时再展开并追加子节点 onBeforeExpand事件:在展开树前加载,感觉这种方式比较优 ...
- 转:JQuery实现下拉框的数据加载和联动
<script type="text/javascript"> $(document).ready(function() { GetByJquery(); $(&quo ...
- ajax实现下拉菜单无刷新加载更多
$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- Maven中使用ssm框架出现:org.apache.tomcat.util.modeler.BaseModelMBean.invoke 调用方法[manageApp]时发生异常
org.apache.tomcat.util.modeler.BaseModelMBean.invoke 调用方法[manageApp]时发生异常 首先可以排查一下像: @RequestMapping ...
- PerfView专题 (第十二篇):对 C# 下的 SDK 类库进行监控(大结局)
一:背景 本篇是我们系列文章的最后一篇,前面的文章中大多是在 CLR Runtime 以及 OS 层面进行监控来发现各种可疑的程序问题,除了这两个层面,其实我们还可以对 SDK 中一些类进行洞察,比如 ...
- 简单创建一个SpringCloud2021.0.3项目(四)
目录 1. 项目说明 1. 版本 2. 用到组件 3. 功能 2. 上三篇教程 3. 日志处理 1. 创建日志公共模块 2. Eureka引入日志模块 4. 到此的功能代码 5. 注册中心换成naco ...
- CF -1679C
Problem - 1679C - Codeforces 题意:当t=1加入一个点,每个点可以影响一行和一列,t=2删除某个点,t=3判断这个矩形内的每个点是否都可以影响. 思路:开始时直接暴力,T了 ...
- 03 最小CMake项目
03 最小CMake项目 所有CMake项目都从一个CMakeLists.txt文件开始,此文件应该放在源代码树的最顶层目录下.可以将CMakeLists.txt想象成CMake项目文件,定义了从源和 ...
- 《网页设计基础——HTML注释与CSS注释》
网页设计基础--HTML注释与CSS注释 一.HTML注释: 格式: <!-- 在此处书写注释 --> 例如: <html> <head> <ti ...
- 腾讯云主机安全【等保三级】CentOS7安全基线检查策略
转载自:https://secvery.com/8898.html 注意:注意,注意:处理前请先做备份,处理前请先做备份,处理前请先做备份 1.确保配置了密码尝试失败的锁定 编辑/etc/pam.d/ ...
- Gitlab备份以及恢复
1.迁移准备工作和思路 从a服务器迁移到b服务器,由于Gitlab自身的兼容性问题,高版本的Gitlab无法恢复低版本备份的数据,需要注意在b服务器部署和a服务器一样版本的gitlab,部署好环境后开 ...
- 3.在 Kubernetes 上安装 Gitlab CI Runner
结合文章:1. 在 Kubernetes 上安装 Gitlab ,地址:https://www.cnblogs.com/sanduzxcvbnm/p/13852854.html 总结: 结合开头的文章 ...
- Mapper 实体转换Entiy to Dto
实际使用中发现很多问题 如果用EFcore 框架,这个表达式树生成一个新的实体导致EFcore 跟踪失败!/// <summary> /// 生成表达式目录树 泛型缓存 /// </ ...