【亚洲城ca88唯一官方网站】table滚动事件

时间:2020-01-31 16:49来源:亚洲城ca88唯一官方网站
时间: 2019-03-26阅读: 956标签: element背景 在项目中,大家必要动用到超级多源于后端重回的数额。有时是得步进步条,有时依然上千条。假若加上后端的多表查询也许数据量过大,那就导

时间: 2019-03-26阅读: 956标签: element背景

在项目中,大家必要动用到超级多源于后端重回的数额。有时是得步进步条,有时依然上千条。假若加上后端的多表查询也许数据量过大,那就导致在前面一个的显得就能够至其慢,非常是在互连网不佳的时候更是如此。

亚洲城ca88唯一官方网站,做管理平台的档期的顺序,用到了element-ui,须要通过监听el-table滚动的地点来收获最新的数据,那么哪些监听el-table的滚动呢?

自然,后端就做了生龙活虎项十二分“美貌”的竞相体验数码——分页

准备

那不分页辛亏,一分页对当先10条数据现在的本来也没多少,就20条,偏偏还得做个分页器。

大家暗中同意的技能栈是 vue element-ui ,template代码:

此刻,假使能够像购物超级市场那样拖拽到底层自动加载新数据就好了。

el-table :data="logList" :show-header="false" row-class-name="table-row-class" height="700" ref="table" @row-click="rowClick" el-table-column type="expand" el-table-column label="log信息" prop="message" /el-table-column/el-table

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

绑定监听事件

此地经过自定义封装vue指令进行打包。(什么是命令:官方指令叫v-on,v-model)

 mounted() { // 获取需要绑定的table this.dom = this.$refs.table.bodyWrapper this.dom.addEventListener('scroll', () = { // 滚动距离 let scrollTop = this.dom.scrollTop // 变量windowHeight是可视区的高度 let windowHeight = this.dom.clientHeight || this.dom.clientHeight // 变量scrollHeight是滚动条的总高度 let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight if (scrollTop   windowHeight === scrollHeight) { // 获取到的不是全部数据 当滚动到底部 继续获取新的数据 if (!this.allData) this.getMoreLog() console.log('scrollTop', scrollTop   'windowHeight', windowHeight   'scrollHeight', scrollHeight) } }) }

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

收获到新的数额后,调解滚动条的岗位

在main.js同等级文件中增加directives.js:

getMoreLog() { ... this.dom.scrollTop = this.dom.scrollTop - 100 ... }
// directives.jsimport Vue from 'vue'Vue.directive('loadmore', { bind  { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight if  { 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

  export default { methods: { loadMore () { // &#36825;&#37324;&#20889;&#20837;&#35201;&#35302;&#21457;&#30340;&#26041;&#27861; } }}

总结

以上所述是作者给我们介绍的在element-ui的select下拉框加上轮转加载,希望对我们享有利于,假设大家有任何疑问请给自身留言,小编会及时苏醒我们的。在这也极其多谢大家对台本之家网址的支撑!借使您认为本文对你有支持,款待转发,烦请注解出处,感激!

编辑:亚洲城ca88唯一官方网站 本文来源:【亚洲城ca88唯一官方网站】table滚动事件

关键词: 亚洲城ca88