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