一次表格及分页优化完善实践，表头固定及分页固定（模仿禅道）

需求：

1、当表格数据未查看到最后一条时，分页固定在页面最下方，直到查看表格最后一行，分页取消固定；
2、当表格滑动到上方，表头固定在系统的上方

思路：

1、当鼠标滑动时判断表格距离浏览器上方的距离，当距离小于系统头部时，表头固定，反之取消固定，可以使用@wheel获取滑轮滚动事件，也可以使用window.addEventListener监听滑动条滑动事件scroll
2、表头固定的方式有三种：

方法一：给el-table的height赋值，获取表格中滚动条滚动到最后一行，始终差着点值，不知道什么原因，考虑不周，想加占位符试试，最初实现了，但是因为高度固定，后面的占位符一直可视，所以冲突了，所以使用了方法二

方法二：使用一模一样的表格，把原表格的表头隐藏，把新表格的内容隐藏

方法三：自己使用div照着表头的样式写一个，个人不太喜欢这种

3、新增一个占位符在表格的下方，当该元素不在可视区域时，分页固定，反之，取消固定

反思：

1、@wheel获取滑轮滚动事件先触发，获取不到滚动条滑动的正确距离，所以有延迟
2、固定表格时，由于考虑不周，忘记了固定了表格高度，元素就一直可见了，想用方法一和方法二结合做
3、改着改着代码手滑把判断表格距离浏览器上方的距离 <= 系统头部，写成了>头部
4、在销毁前移除监听器的时候没有加true参数，导致报错Cannot read property ‘getBoundingClientRect‘ of undefined

自己修改封装的分页组件Pagination.vue

<template><div :class= "{ 'fixed-foot': isFixed, 'pagination': !isFixed }"><el-paginationv-if="isSmall"small@size-change="handleSizeChange"@current-change="handleCurrentChange"layout="total, prev, pager, next":page-size="page.pageSize":total="page.total"></el-pagination><el-pagination:page-sizes="[10, 50, 100,500]"layout="total,sizes,prev, pager, next,jumper":total="page.total":page-size="page.pageSize":current-page="page.currentPage"@current-change="handleCurrentChange"@size-change="handleSizeChange"></el-pagination></div>
</template>
<script>
export default {name: 'pagination', //分页组件props: {page: {type: Object,default: {}},enableSmall: {type: Boolean,default: false,},isFixed: {type: Boolean,default: true,}},data() {return {isSmall: this.enableSmall || false, //是否启用small模式}},methods: {handleCurrentChange(val){this.$emit('pageChange', val);},handleSizeChange(val) {console.log(`每页 ${val} 条`);this.$emit('pageChangeSize', val);}}
}
</script>
<style lang="less" scoped>
.pagination{position: absolute;bottom: 52px;width: calc(100% - 216px);margin: 0 !important;text-align: right;.el-pagination{padding: 10px 10px 10px 0 !important;background-color: rgba(99, 99, 99, 0.6);}
}.fixed-foot{position: fixed;width: calc(100% - 216px);right: 10px;bottom: 0;margin: 0 !important;text-align: right;.el-pagination{padding: 10px 10px 10px 0 !important;background-color: rgba(99, 99, 99, 0.6);}
}/deep/.el-pagination__total{color: #fff;
}/deep/ .el-input__inner,
/deep/ .btn-prev,
/deep/ .btn-next,
/deep/ .el-pager li{border: 1px solid transparent;background-color: rgba(99, 99, 99, 0.6);color: #fff;
}/deep/ .el-pager li.active{color: #409EFF;
}/deep/ .el-pagination button:disabled{background-color: rgba(99, 99, 99, 0.6);
}/deep/ .el-pagination__jump{color: #fff;
}
</style>

主要实现代码test.vue

<template><div class="mainbox"><el-table :data="emptyData" class="table-head" v-if="isFixedHead"><el-table-column prop="NO" type="index" label="序号" width="70" align="center"></el-table-column><el-table-column prop="a" label="1"></el-table-column><el-table-column prop="b" label="2"></el-table-column><el-table-column prop="c" label="3"></el-table-column><el-table-column prop="d" label="4"></el-table-column><el-table-column prop="e" label="5"></el-table-column><el-table-column prop="f" label="6"></el-table-column></el-table><el-table id="alarmTable" :data="tableData" border stripe class="timeline-table"><el-table-column prop="NO" type="index" label="序号" width="70" align="center"></el-table-column><el-table-column prop="a" label="1"></el-table-column><el-table-column prop="b" label="2"></el-table-column><el-table-column prop="c" label="3"></el-table-column><el-table-column prop="d" label="4"></el-table-column><el-table-column prop="e" label="5"></el-table-column><el-table-column prop="f" label="6"></el-table-column></el-table><Pagination ref="pagination" :page="page" :isFixed="isFixedFoot" @pageChange="pageChange" @pageChangeSize="pageChangeSize" v-if="page.total > 10"></Pagination><div class="placeholder" id="placeholder"></div></div>
</template><script>export default {name: "test",components: {Pagination: () => import('@components/common/Pagination')},data() {return {page:{currentPage: 1,pageSize: this.global.pageSize,total: 0,},tableData: [],isFixedFoot: true,isFixedHead: null,emptyData: []}},mounted() {window.addEventListener('scroll', this.handleScroll, true)},// 页面销毁前beforeDestroy() {window.removeEventListener('scroll', this.handleScroll, true)},methods: {placeholderVisible(){let rect = document.getElementById('placeholder').getBoundingClientRect()const viewHeight = window.innerHeight || document.documentElement.clientHeightconsole.log('判断', rect.bottom, window.innerHeight)if(rect.bottom <= viewHeight){console.log('元素出现')this.isFixedFoot = false}else{console.log('元素消失')this.isFixedFoot = true}},handleScroll() {let offsetTop = document.getElementById('table').getBoundingClientRect().topif(offsetTop < 100){console.log('固定')this.isFixedHead = true}else{console.log('移除固定')this.isFixedHead = false}this.placeholderVisible()},loadTable(){// 获取数据加载表格},pageChange(val){//分页this.page.currentPage = valthis.loadTable()},pageChangeSize(val){//分页this.page.pageSize = valthis.global.pageSize = valthis.loadTable()}},}
</script><style lang="less" scoped>
.mainbox{width: calc(100% - 10px);.table-head{position: fixed;top: 100px;z-index: 1;width: calc(100% - 216px);/deep/ .el-table__header {background-color: rgba(26, 64, 139, 0.9);}/deep/ .el-table__row,/deep/ .el-table__empty-block{display: none;}}.placeholder{min-height: 100px;}
}
</style>

效果图如下，文字部分已打码

部分作废代码也记录一下吧，没准以后用的到

// 获取表格对象let dom = document.querySelector('.el-table__body-wrapper')dom.addEventListener("scroll", () => {const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;// 判断是否到底if (scrollDistance <= 1) {console.log('已经见底了')this.fixedFoot = falsethis.isFixed = false}else{this.isFixed = true}})let scrollTop = this.$refs.table.bodyWrapper.scrollToplet scrollHeight = this.$refs.table.bodyWrapper.scrollHeightconsole.log('差值', scrollHeight, scrollTop, scrollHeight - scrollTop)this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight;let scrollHeight = this.$refs.table.bodyWrapper.scrollHeightthis.$refs.table.bodyWrapper.scrollTop = scrollHeightif(scrollHeight - scrollTop <= 605){// alert('滑动到底部')}let placeholder = document.getElementById('placeholder')if(document.documentElement.contains(placeholder)){console.log('滑动到底部')}

主要参考文章：
JS判断元素是否在可视区域
vue 中 elementUI el-table 实现滚动加载
关于scroll事件与wheel事件的区别
Cannot read property ‘getBoundingClientRect‘ of undefined

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

一次表格及分页优化完善实践，表头固定及分页固定（模仿禅道）相关推荐

JSP表格模板升级（4）-- 表头和表尾固定的表格模板
上文<JSP表格模板升级(3)--可变列数的表格模板>已经完成了一个功能几近完善的表格模板,直接可以用于大部分二维表格的显示需求.本文中我们将改变表格底层的实现,将table标签替换为更加 ...
禅道 11.4.1 版本发布，主要优化细节
禅道项目管理软件集产品管理.项目管理.质量管理.文档管理.组织管理和事务管理于一体,是一款功能完备的项目管理软件,完美地覆盖了项目管理的核心流程.禅道官网:www.zentao.net. 大家好,禅道 ...
ajax mysql搜索_京东分页优化之Mysql优化实践
当你和别人都能实现一个某个功能,这时候区分你们能力的不是谁干活多少,而是谁能写出效率更高的代码.比如显示一个订单列表它不仅仅是写一条SELECT SQL那么简单,我们还需要很清楚的知道这条SQL他大概 ...
vue项目结合iview4UI组件实现树状结构及复杂动态表头列表 Tree-Table 及复杂header 省市区树状表格联动数据优化后台一次性返回一万条数据页面卡死问题
一.首先看看需求最终效果图,该需求总共罗列以下几点最左侧采用树状结构将地址省市区县街道展示出来,并且控制名称长度限制,多余的用省略号表示,鼠标悬浮上去名称展示出来列表默认展示市一级数据,县及街道数 ...
前端性能优化最佳实践
本文主要考量客户端性能.服务器端和网络性能,内容框架来自 Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基础上补充了一些相关或者更符合主流技术的 ...
Android应用性能优化最佳实践.
移动开发 Android应用性能优化最佳实践罗彧成著图书在版编目(CIP)数据 Android应用性能优化最佳实践 / 罗彧成著. -北京:机械工业出版社,2017.1 (移动开发) ISBN ...
前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...
正确使用索引（sql优化），limit分页优化，执行计划，慢日志查询
查看表相关命令 - 查看表结构 desc 表名- 查看生成表的SQL show create table 表名- 查看索引 show index from 表名使用索引和不使用索引由于索引是专门用 ...

一次表格及分页优化完善实践，表头固定及分页固定（模仿禅道）

需求：

思路：

反思：

自己修改封装的分页组件Pagination.vue

主要实现代码test.vue

一次表格及分页优化完善实践，表头固定及分页固定（模仿禅道）相关推荐

最新文章

热门文章