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 ...
随机推荐
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- SpringMVC前置复习以及扩展
SpringMVC ssm:mybatis+Spring+SpringMVC javaSE javaweb 框架 理解的DAO层和Service层 先简单来讲下Dao层,和Service层的概念: S ...
- KingbaseES R6 集群修改物理IP和VIP案例
在用户的实际环境里,可能有时需要修改主机的IP,这就涉及到集群的配置修改.以下以例子的方式,介绍下KingbaseES R6集群如何修改IP. 一.案例测试环境 操作系统: [KINGBASE@nod ...
- Job for redis-server.service failed because the control process exited with error code(Centos 7 设置Redis开机自启报错)
报错信息如下: Job for redis-server.service failed because the control process exited with error code. See ...
- Solutions:如何运用Elastic App Search快速建立出色的React搜索体验
建立搜索体验是一项艰苦的工作. 乍一看似乎很容易:建立一个搜索栏,将数据放入数据库,然后让用户输入对该数据库的查询. 但是,在数据建模,底层逻辑以及(当然)总体设计和用户体验方面,有很多事情要考虑. ...
- 使用Prometheus和Grafana监控emqx集群
以 Prometheus为例: emqx_prometheus 支持将数据推送至 Pushgateway 中,然后再由 Promethues Server 拉取进行存储. 注意:emqx_promet ...
- Redis 监控指标
监控指标 性能指标:Performance 内存指标: Memory 基本活动指标:Basic activity 持久性指标: Persistence 错误指标:Error 性能指标:Performa ...
- linux软链接的创建、修改和删除
创建 ln -s [源文件或目录] [目标文件或目录] 修改 ln –snf [新的源文件或目录] [目标文件或目录] 删除 rm –rf 软链接名称 注意,上面这种形式可能会让人产生担忧,害怕删除的 ...
- k8s上安装elasticsearch集群
官方文档地址:https://www.elastic.co/guide/en/cloud-on-k8s/current/k8s-quickstart.html yaml文件地址:https://dow ...
- 延申三大问题中的第三个问题处理---发布更新时先把服务从注册中心给down下来,等待一段时间后再能更新模块
一开始采取的思路大致如下: 在preStop中使用/bin/sh命令,先down 然后sleep一段时间, 这种思路的执行情况如下: 假若升级容器使用的镜像版本的话,先执行preStop中的命令,sl ...