erp-el-element/utils/tablescroll.js

94 lines
4.4 KiB
JavaScript
Raw Normal View History

2024-05-07 11:51:58 +08:00
import Vue from 'vue';
// 自定义table水平滚动条始终显示在可视区域
Vue.directive('perfectScrollbar', {
componentUpdated:function (el, binding,vnode) {
let trCount=vnode.context.tableData.length;// tr的个数
fixTabScrollbar(el,null,trCount)
}
})
//自定义app滚动事件
Vue.directive('appScroll', {
bind: function(el, binding, vNode) {
let start = (e) =>{
fixTabScrollbar(null,el)
}
// 添加事件监听器
el.addEventListener("scroll", start);
}
})
//app滚动->定位table的水平滚动条
function fixTabScrollbar(tabEle,appEle,trCount) {
var tabEle=tabEle||document.getElementsByClassName('el-table')[0] // table 元素
var appEle=appEle||document.getElementById("app") // 滚动条所在容器
console.log(tabEle);
console.log(appEle);
if(!(tabEle&&appEle)) return;
var tabContainer=tabEle.parentNode; // table 的父级容器
let thead = tabEle.getElementsByClassName('el-table__header-wrapper')[0];
let tbody = tabEle.getElementsByClassName('el-table__body-wrapper')[0];
var trCount=trCount||tbody.getElementsByTagName("tr").length //tr的个数
console.log(trCount);
let trHeight=50.4 //tr的高度自己设置的,这里el-table-column需要设置为 show-overflow-tooltip不然换行会影响tr的高度 elementui这个框架不知道0.4哪里来的
let theadHeight=thead.clientHeight?thead.clientHeight:60; // 表头的高度60是默认的高度(自己设置的)
let tabHeight=theadHeight+trHeight*trCount+18 //table的高度 18是el-table水平滚动条的高度
let tabWinWidth=thead.clientWidth //table视口的宽度
let tabWidth=thead.getElementsByTagName('table')[0].offsetWidth;//table的宽度
let appHeight=appEle.offsetHeight- getOffsetTop(appEle) // 窗口的高度
let tabOffsetTop=getOffsetTop(tabContainer) //table 距离顶部距离
let appScrollTop=appEle.scrollTop // 容器向上滚动的距离
let bottom=tabOffsetTop+tabHeight-appScrollTop-appHeight+208;
// let bottom=4407;
console.log(tabContainer);
console.log(theadHeight);
console.log(tabHeight);
console.log(tabOffsetTop);
console.log(appScrollTop);
console.log(appHeight);
console.log(bottom);
if(bottom>0&&tabWidth>tabWinWidth){ //底部大于0并且table的宽度大于el-table视口的宽度-->显示滚动条,并隐藏自己的滚动条
let scrollBarEle=null
let childEle=null
tabEle.classList.add("hide-scrollBar") //隐藏tableC自己的滚动条
if(document.getElementById('perfectScrollbar-div')==null){
scrollBarEle = document.createElement('div');
scrollBarEle.id = 'perfectScrollbar-div';
childEle=document.createElement('p');
childEle.id = 'perfectScrollbar-child';
tabContainer.appendChild(scrollBarEle);
scrollBarEle.appendChild(childEle);
scrollBarEle.style.display="block";
childEle.style.width=tabWidth+"px";
childEle.style.height="1px";
childEle.style.padding="0";
childEle.style.margin="0";
scrollBarEle.style.position="absolute";
scrollBarEle.style.overflowX="auto";
scrollBarEle.style.left="0px";
scrollBarEle.style.right="0px";
scrollBarEle.style.margin="auto";
}else{
scrollBarEle = document.getElementById('perfectScrollbar-div');
}
scrollBarEle.style.bottom=bottom+"px";
scrollBarEle.onscroll = function(){
let target=event.target;
let scrollLeft=target.scrollLeft
tbody.scrollLeft=scrollLeft;
}
}else{
tabEle.classList.remove("hide-scrollBar") //显示tableC自己的滚动条
var scrollBarEle=document.getElementById('perfectScrollbar-div');
if(scrollBarEle)scrollBarEle.parentNode.removeChild(scrollBarEle);
}
}
function getOffsetTop(obj) {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
var y = obj.offsetTop;
while (obj = obj.offsetParent) y += obj.offsetTop;
return y;
}else{
return 0
}
}