diff --git a/src/components/AiTable.vue b/src/components/AiTable.vue index 35531b0..ee9340d 100644 --- a/src/components/AiTable.vue +++ b/src/components/AiTable.vue @@ -115,7 +115,8 @@ export default { return { name: '', chooseList: [], - defaultPage: {} + defaultPage: {}, + heightTop: 0 } }, components: { @@ -155,6 +156,15 @@ export default { } }, }, + + mounted() { //添加监听滚动条事件 + window.addEventListener('scroll', this.handleScroll, true) + }, + + destroyed() { //移除(跳转页面后移除) + window.removeEventListener('scroll', this.handleScroll, true) + }, + methods: { handleChange(current) { this.$emit('update:current', current) @@ -163,6 +173,27 @@ export default { this.$emit('getList') }) }, + + handleScroll() { + const top = document.querySelector('.top') ? document.querySelector('.top').clientHeight + 56 : 56 + let heightTop = document.getElementsByClassName('ai-list__content--right')[0].scrollTop //距离顶部高度 + + if (heightTop >= top) { + document.getElementsByClassName('el-table__header-wrapper')[0].style.position = `fixed` + document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '9999' + document.getElementsByClassName('el-table__header-wrapper')[0].style.top = `${112}px` + document.getElementsByClassName('el-table__fixed-right')[0].style.position = `fixed` + document.getElementsByClassName('el-table__fixed-right')[0].style.zIndex = '9999' + document.getElementsByClassName('el-table__fixed-right')[0].style.top = `${112}px` + } else { + document.getElementsByClassName('el-table__header-wrapper')[0].style.position = '' + document.getElementsByClassName('el-table__header-wrapper')[0].style.top = '' + document.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '' + document.getElementsByClassName('el-table__fixed-right')[0].style.position = '' + document.getElementsByClassName('el-table__fixed-right')[0].style.top = '' + document.getElementsByClassName('el-table__fixed-right')[0].style.zIndex = '' + } + }, handleSizeChange(size) { this.$emit('update:size', size) this.$emit('update:pageConfig', {...this.pageConfig, size})