erp-el-element/utils/tablescroll.js

94 lines
4.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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
}
}