element table表头固定悬浮，element table表头黏性布局，element table表头悬浮窗口
发布时间
阅读量：
阅读量
element table 标题固定悬停
-
效果图
-
- 图一
- 图二
- 图三
- 图四
-
修改方案
-
使用方法
-
mixins文件代码
-
添加公用样式
效果图
图一
图二
图三
图四
修改方案
针对需要table表头黏性布局的页面添加mixins
使用方法
import scroll from '@/views/mixins/scroll'
export default {
mixins: [scroll]
}
AI写代码mixins文件代码
const scorll = {
methods: {
ishowBottomDiv(bottomDiv, scrollBar, tableBodyDomWrap){
if(bottomDiv.getBoundingClientRect().top>document.body.clientHeight){
if(scrollBar.style.display === 'none'){
scrollBar.style.display = 'block';
scrollBar.scrollLeft = tableBodyDomWrap.scrollLeft;
}
scrollBar.style.display = 'block';
} else {
scrollBar.style.display = 'none';
}
}
},
mounted() {
let self = this;
let bottomDiv = document.createElement('div');
let bar = document.createElement('div');
let scrollBar = document.createElement('div');
let tableBodyDom = document.querySelector('.el-table__body')
let tableBodyDomWrap = document.querySelector('.el-table__body-wrapper')
this.$nextTick(() => {
let dom = document.querySelector('.el-table')
dom.append(bottomDiv);
let MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
window.mutationObserver = new MutationObserver(function (mutations) {
self.ishowBottomDiv(bottomDiv, scrollBar, tableBodyDomWrap)
})
window.mutationObserver.observe(dom, {
childList: true,
subtree: true, // 子节点的变动（新增、删除或者更改）
})
bar.style.width = tableBodyDom.getBoundingClientRect().width+'px'
bar.style.height = '1px'
scrollBar.style.width = dom.getBoundingClientRect().width+'px'
scrollBar.style.height = '30px'
scrollBar.style.overflow = 'auto'
scrollBar.style.zIndex = '10000'
scrollBar.style.bottom = '0px'
scrollBar.style.position = 'fixed'
scrollBar.append(bar);
dom.append(scrollBar);
})
window.addEventListener(
'scroll',
() => {
let dom = document.querySelector('.el-table')
if (!dom) {
return
}
if(scrollBar.style.display === 'block'){
tableBodyDomWrap.scrollLeft = scrollBar.scrollLeft;
} else {
scrollBar.scrollLeft = tableBodyDomWrap.scrollLeft;
}
self.ishowBottomDiv(bottomDiv, scrollBar, tableBodyDomWrap)
let elTable = document.querySelector('.el-table__header-wrapper')
let elTableFixed = document.querySelector(
'.el-table__fixed .el-table__fixed-header-wrapper'
)
let elTableFixedRight = document.querySelector(
'.el-table__fixed-right .el-table__fixed-header-wrapper'
)
let elTableFixedRightHeader = document.querySelector(
'.el-table__fixed-right .el-table__header'
)
if (dom.getBoundingClientRect().top < 64) {
if (document.querySelector('.zhanweitablehead')) {
//
} else {
let zhanwei = document.createElement('div')
zhanwei.className = 'zhanweitablehead'
zhanwei.style.width = elTable.getBoundingClientRect().width + 'px'
zhanwei.style.height = elTable.getBoundingClientRect().height + 'px'
dom.insertBefore(zhanwei, dom.children[0])
}
if (elTable) {
elTable.style.position = 'fixed'
elTable.style.zIndex = '1000'
elTable.style.top = '64px'
elTable.style.left = '256px'
elTable.style.width = dom.getBoundingClientRect().width + 'px'
elTable.style.overflow = 'hidden'
}
if (elTableFixed) {
elTableFixed.style.position = 'fixed'
elTableFixed.style.zIndex = '10000'
elTableFixed.style.top = '64px'
elTableFixed.style.left = '256px'
elTableFixed.style.width = '320px'
elTableFixed.style.overflow = 'hidden'
}
if (elTableFixedRight) {
elTableFixedRight.style.width = document.querySelector(
'.el-table__fixed-right'
).style.width
elTableFixedRight.style.position = 'fixed'
elTableFixedRight.style.zIndex = '10000'
elTableFixedRight.style.top = '64px'
elTableFixedRight.style.height = '50px'
elTableFixedRight.style.right = '36px'
elTableFixedRight.style.overflow = 'hidden'
elTableFixedRightHeader.style.position = 'absolute'
elTableFixedRightHeader.style.right = '0'
}
} else {
if (!dom) {
return
}
if (document.querySelector('.zhanweitablehead')) {
document
.querySelector('.el-table')
.removeChild(document.querySelector('.zhanweitablehead'))
}
if (elTable) elTable.style = {}
if (elTableFixed) elTableFixed.style = {}
if (elTableFixedRight) elTableFixedRight.style = {}
if (elTableFixedRightHeader)
elTableFixedRightHeader.style.position = 'initial'
}
},
true
)
},
destroyed() {
window.removeEventListener('scroll');
window.mutationObserver.disconnect();
},
}
export default scorll;
AI写代码添加公用样式
.is-scrolling-left ~ .el-table__fixed-right,
.is-scrolling-middle ~ .el-table__fixed-right {
.el-table__fixed-header-wrapper {
border-left: 2px solid #d6d6d657;
}
}
.is-scrolling-right ~ .el-table__fixed,
.is-scrolling-middle ~ .el-table__fixed {
.el-table__fixed-header-wrapper {
border-right: 2px solid #d6d6d657;
}
}
AI写代码全部评论 (0)
还没有任何评论哟~