在 main.js 自定义 sticky 指令
Vue.directive('sticky', {
// 当被绑定的元素插入到 DOM 中时……
inserted(el,binding) {
// 获取表格
const thead = el.children[1]
const tbody = el.children[2]
// 获取滚动元素
const scrollParent = document.querySelector(binding.value.parent)
scrollParent.addEventListener('scroll', function(){
// 获取thead距离顶部的距离
let theadTop = thead.getBoundingClientRect().top
if (theadTop <= binding.value.top) {
thead.style.position = 'fixed'
thead.style.zIndex = '2021'
thead.style.top = binding.value.top + 'px'
thead.style.width = tbody.offsetWidth + 'px'
}
// 判断是否需要回归原来位置
let originally = tbody.getBoundingClientRect().top
if (originally > binding.value.top) {
thead.style.position = 'relative'
thead.style.zIndex = '0'
thead.style.top = 0 + 'px'
thead.style.width = tbody.offsetWidth + 'px'
}
// 判断底部距离是否超过表头
let goBeyond =tbody.getBoundingClientRect().bottom
if (goBeyond <= thead.offsetHeight) {
thead.style.position = 'relative'
thead.style.zIndex = '0'
thead.style.top = 0 + 'px'
thead.style.width = tbody.offsetWidth + 'px'
}
})
},
})
使用方法,top 为距离顶部位置,parent 滚动元素 ID
template>
<el-table
v-sticky="{top: 150,parent:'#table_box'}"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>