做最好的在线中文绅士本子阅读网站,水处理网站源码,医院网络系统,什么网站可以做国外生意在开发后台管理系统时#xff0c;表格是最常用的一个组件#xff0c;为了看数据方便#xff0c;时常需要固定表头。
如果页面基本只有一个表格区域#xff0c;我们可以根据屏幕的高度动态的计算出一个值#xff0c;给表格设定一个固定高度#xff0c;这样表头就可以固定…在开发后台管理系统时表格是最常用的一个组件为了看数据方便时常需要固定表头。
如果页面基本只有一个表格区域我们可以根据屏幕的高度动态的计算出一个值给表格设定一个固定高度这样表头就可以固定了。
但是如果表格上面还有其它区域这样动态计算出表格的高度时还要减去其它区域的高度因此计算出的表格的高度就会非常小看数据特别不方便此时就不能给表格设置一个固定高度了但是这样一页数据很多时滚动页面到底部表头就被滚动隐藏了为了用户体验好一点遇到这种情况需要对表头添加吸顶功能如下图所示 下面直接上代码
templatedivdiv classapp-container!-- 其它区域 --div classtable-total/div!-- 表格主体 --div classtable-containerel-table :datatableData stylewidth:100%;el-table-column v-foritem in tableColumn :keyitem.prop :propitem.prop :labelitem.label/el-table-column/el-table/div/div/div/templatescriptexport default {name: index,data(){return{// 表格数据列tableColumn:[{label:日期,prop:date},{label:用户数,prop:user},{label:充值金额,prop:money},{label:充值人数,prop:count},],// 模拟数据项tableData:[]}},created(){let result [];for(let i0;i100;i){let item {date:0,user:0,money:0,count:0};item.idi1;result.push(item);}this.tableData result;},mounted(){window.addEventListener(scroll, this.handleScroll, true)},beforeDestroy() { window.removeEventListener(scroll, this.handleScroll, true)},methods: {handleScroll(e) {let scrollTop document.getElementsByClassName(app-container)[0].scrollTop;let offsetWidth document.getElementsByClassName(app-container)[0].offsetWidth - 43; // 43右侧滚动条加上外边距的宽度let headerWrapper document.getElementsByClassName(el-table__header-wrapper)[0];let fixedWrapper document.getElementsByClassName(el-table__fixed-header-wrapper);// 300为滚动区域内除了表格以外其它的区域高度if (scrollTop 300) { // 93为表头在吸顶时距离屏幕顶部的位置headerWrapper.style.top 93px;headerWrapper.style.zIndex 2;headerWrapper.style.position fixed;headerWrapper.style.width offsetWidthpx;// 表格有固定列时还会多出一个表头if(fixedWrapper.length){for (let i0;ifixedWrapper.length;i) {fixedWrapper[i].style.top 93px;fixedWrapper[i].style.zIndex 2;fixedWrapper[i].style.position fixed;headerWrapper.style.width offsetWidthpx;}}} else {headerWrapper.style.top ;headerWrapper.style.zIndex ;headerWrapper.style.position inherit;headerWrapper.style.width ;if(fixedWrapper.length){for (let i0;ifixedWrapper.length;i) {fixedWrapper[i].style.top ;fixedWrapper[i].style.zIndex ;fixedWrapper[i].style.width ;}}}}},
};
/scriptstyle langscss scoped.app-container {height: calc(100vh - 108px);overflow-y: scroll;.table-total{height:300px;border:1px solid #eaedf1;}.table-container {min-height: calc(100vh - 432px);border:1px solid #eaedf1;}}/style
以上代码中涉及到的几个数值请参考注释根据实际情况进行修改。
