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


Posted in Javascript onApril 18, 2019

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

自然,后端就做了一项非常“漂亮”的交互体验数据——分页

这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器。(假设为10条)

此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了。

于是《在element-ui的select下拉框加上滚动加载》诞生了。

这里通过自定义封装vue指令进行封装。(什么是指令:官方指令叫v-on,v-model)

以下以element-ui中的select为例:

 在main.js同级别文件中添加directives.js:

// directives.js

import Vue from 'vue'
Vue.directive('loadmore', {
 bind (el, binding) {
  // 获取element-ui定义好的scroll盒子
  const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
  SELECTWRAP_DOM.addEventListener('scroll', function () {
   
   const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
   if (CONDITION) {
    binding.value()
   }
  })
 }
})
  • v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
  • scrollHeight 获取元素内容高度(只读)
  • scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
  • clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

这里运用到了滚动偏移来做监听来处理,这与聊天对话框中默认下拉到底部的原理是大同小异的,后续我会有专门的文章进行讲解。

// main.js
// 注册滚动条加载触发事件v-loadmore绑定
import directives from './directives'
Vue.use(directives)

然后在组件中使用

<!-- vue -->
<el-select
 v-model="chatmode"
 placeholder="聊天模式"
 size="mini"
 v-loadmore="loadMore">
 <el-option
  v-for="item in chatmodes"
  :key="item.value"
  :label="item.qa_name"
  :value="item.qa_code"
  :disabled="item.disabled">
 </el-option>
</el-select>
<script>
export default {
 methods: {
  loadMore () {
   // 这里写入要触发的方法
  }
 }
}
</script>

总结

以上所述是小编给大家介绍的在element-ui的select下拉框加上滚动加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
奇妙的js
Sep 24 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 #Javascript
vue模式history下在iis中配置流程
Apr 17 #Javascript
详解Vue 全局变量,局部变量
Apr 17 #Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 #Javascript
Angular Excel 导入与导出的实现代码
Apr 17 #Javascript
详解Vue路由自动注入实践
Apr 17 #Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 #Javascript
You might like
图书管理程序(三)
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
WebPack基础知识详解
2017/01/16 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python动态性强类型用法实例
2015/05/09 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
婚礼主持结束词
2014/03/13 职场文书
五年级学生评语
2014/04/22 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
活动经费申请报告
2015/05/15 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python