94 lines
4.4 KiB
JavaScript
94 lines
4.4 KiB
JavaScript
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
|
||
}
|
||
}
|