撤销表头吸顶
This commit is contained in:
@@ -140,6 +140,8 @@ export default {
|
||||
}
|
||||
|
||||
.ai-list__content--right-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// margin: 0 20px;
|
||||
padding: 20px 20px !important;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="ai-table" :class="[isShowBorder ? 'ai-table__border' : 'ai-table__noborder']">
|
||||
<el-table :data="tableData"
|
||||
header-cell-class-name="ai-table__header"
|
||||
cell-class-name="ai-table__cell"
|
||||
row-class-name="ai-table__row"
|
||||
:class="{'ai-header__border': isShowBorder}"
|
||||
:ref="refName"
|
||||
:size="tableSize"
|
||||
:stripe="stripe"
|
||||
:tooltip-effect="tooltipEffect"
|
||||
@selection-change="handleSelectionChange"
|
||||
v-on="$listeners"
|
||||
v-bind="$attrs"
|
||||
v-loading="loading">
|
||||
header-cell-class-name="ai-table__header"
|
||||
cell-class-name="ai-table__cell"
|
||||
row-class-name="ai-table__row"
|
||||
:class="{'ai-header__border': isShowBorder}"
|
||||
:ref="refName"
|
||||
:size="tableSize"
|
||||
:stripe="stripe"
|
||||
:tooltip-effect="tooltipEffect"
|
||||
@selection-change="handleSelectionChange"
|
||||
v-on="$listeners"
|
||||
v-bind="$attrs"
|
||||
v-loading="loading">
|
||||
<template v-for="colConfig in colConfigs.filter(e=>!e.hide)">
|
||||
<slot v-if="colConfig.slot && colConfig.slot !== 'options'" :name="colConfig.slot"/>
|
||||
<component
|
||||
@@ -154,14 +154,7 @@ export default {
|
||||
pagerCount: this.pagerCount,
|
||||
...this.pageConfig
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() { //添加监听滚动条事件
|
||||
window.addEventListener('scroll', this.handleScroll, true)
|
||||
},
|
||||
destroyed() { //移除(跳转页面后移除)
|
||||
window.removeEventListener('scroll', this.handleScroll, true)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -173,41 +166,6 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
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 = '10000'
|
||||
document.getElementsByClassName('el-table__header-wrapper')[0].style.top = `${112}px`
|
||||
|
||||
|
||||
document.getElementsByClassName('el-table__fixed-right')[0].style.top = `${document.querySelector('.top') ? -66 : -41}px`
|
||||
|
||||
for (let i = 0; i < document.querySelectorAll('.el-table__header-wrapper th div').length; i++) {
|
||||
document.querySelectorAll('.el-table__header-wrapper th div')[i].style.visibility = 'inherit'
|
||||
}
|
||||
// for (let i = 0; i < document.querySelectorAll('.el-table__body-wrapper .is-hidden .cell').length; i++) {
|
||||
// document.querySelectorAll('.el-table__body-wrapper .is-hidden .cell')[i].style.visibility = 'inherit'
|
||||
// }
|
||||
|
||||
// document.getElementsByClassName('el-table__fixed-header-wrapper')[0].style.position = `fixed`
|
||||
// document.getElementsByClassName('el-table__fixed-header-wrapper')[0].style.zIndex = '9999'
|
||||
// document.getElementsByClassName('el-table__fixed-header-wrapper')[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.top = `${0}px`
|
||||
for (let i = 0; i < document.querySelectorAll('.el-table__header-wrapper th div').length; i++) {
|
||||
document.querySelectorAll('.el-table__header-wrapper th div')[i].style.visibility = 'visible'
|
||||
}
|
||||
// for (let i = 0; i < document.querySelectorAll('.el-table__body-wrapper .is-hidden .cell').length; i++) {
|
||||
// document.querySelectorAll('.el-table__body-wrapper .is-hidden .cell')[i].style.visibility = 'visible'
|
||||
// }
|
||||
}
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.$emit('update:size', size)
|
||||
this.$emit('update:pageConfig', {...this.pageConfig, size})
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
<ai-table
|
||||
:isShowPagination="false"
|
||||
:tableData="list"
|
||||
height="500"
|
||||
:col-configs="colConfigs"
|
||||
:total="list.length"
|
||||
style="margin-top: 8px;"
|
||||
|
||||
Reference in New Issue
Block a user