elementui的表格的滚动条的出现导致表格位置错乱-创新互联
分为两种情况,为滚动条出现,和滚动条隐藏
滚动条出现的情况
网页名称:elementui的表格的滚动条的出现导致表格位置错乱-创新互联
标题网址:http://scyanting.com/article/dedgpp.html
先获取浏览器滚动条的宽度
创新互联公司专业为企业提供嘉定网站建设、嘉定做网站、嘉定网站设计、嘉定网站制作等企业网站建设、网页设计与制作、嘉定企业网站模板建站服务,十余年嘉定做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。export function findDimensions():{winWidth: Number, winHeight: Number} {let winWidth: Number, winHeight: Number
// 获取窗口宽度
if (window.innerWidth) {winWidth = window.innerWidth } else if ((document.body) && (document.body.clientWidth)) {winWidth = document.body.clientWidth }
// 获取窗口高度
if (window.innerHeight) {winHeight = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) {winHeight = document.body.clientHeight }
// 通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {winHeight = document.documentElement.clientHeight
winWidth = document.documentElement.clientWidth
}
return {winWidth,
winHeight
}
}
再调用详情接口中调用
getTableHeight() { this.$nextTick((res) =>{const allHeight = document.querySelector('.rightConter').offsetHeight
document.querySelector('.el-table__header').style.paddingRight = getScrollbarWidth() + 'px'
})
},
滚动条没有出现在调用详情页的接口中使用
hasTableSrocllp() { // const srollHeight = this.$refs.chatListRef.bodyWrapper
this.$nextTick((res) =>{// this.$refs.chatListRef.bodyWrapper.scrollTop = this.$refs.chatListRef.bodyWrapper.scrollHeight
this.$refs.chatListRef.bodyWrapper.scrollTop = 100
// 先让滚动条滚动
if (this.$refs.chatListRef.bodyWrapper.scrollTop >0) { // 判断滚动条是否发生了滚动
this.tableSrocll = true
// el-table__body
// document.querySelector('.el-table__body').style.paddingRight = 0 + 'px'
console.log('有滚动条')
} else { // 没有滚动
this.tableSrocll = false
document.querySelector('.el-table__body').style.paddingRight = getScrollbarWidth() + 'px'
}
// 恢复滚动条到顶部
this.$refs.chatListRef.bodyWrapper.scrollTop = 0
// console.log('1144', document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 10)
// if (document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop >0) { // 判断滚动条是否发生了偏远
// console.log('有滚动条')
// } else {// console.log('无滚动条')
// }
// document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 0 // 恢复滚动条到顶部
})
},
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
网页名称:elementui的表格的滚动条的出现导致表格位置错乱-创新互联
标题网址:http://scyanting.com/article/dedgpp.html