vue监听滚动事件实现vxe-grid的header顶端显示

最新推荐文章于 2024-08-19 11:34:55 发布

mahongqi123456

最新推荐文章于 2024-08-19 11:34:55 发布

阅读量978

点赞数

文章标签： html vue javascript

本文链接：https://blog.csdn.net/mahongqi123456/article/details/118676174

版权

本文介绍如何在Vue中使用vxe-grid组件，通过监听滚动事件实现表格头部在滚动时始终保持可见。通过设置`header-row-class-name`并结合CSS样式，当页面滚动超过一定距离时，将表格头变为固定定位。注意此方法可能与fixed属性及横向滚动冲突，需避免固定列宽导致的横向滚动条。

摘要由CSDN通过智能技术生成

vue监听滚动事件实现vxe-grid的header顶端显示

1.vxe-grid部分

<vxe-grid
	:data="specialPriceDetailBeanData"
	:columns="detailTableColumn"
    :header-row-class-name="tableHeaderClassName"
    size="mini"
    border
    resizable
    show-overflow
    show-header-overflow/>

监听事件

data() {
    return {
    	tableHeaderClassFlag: false
    }
}，
mounted() {
	this.addListener()
},
destroy() {
    this.removeListener()
},
methods: {
    addListener() {
      window.addEventListener('scroll', this.handleScroll, true)
    },
    removeListener() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 260) {
        this.tableHeaderClassFlag = true
      } else {
        this.tableHeaderClassFlag = false
      }
    },
    tableHeaderClassName(row) {
      if (this.tableHeaderClassFlag) {
        return 'headerClass'
      } else {
        return 'headerClassNone'
      }
    }
}

style部分

<style>
.headerClass {
  	margin-top: 30px;
  	top: 44px;
	z-index: 99999;
	position: fixed;
}
.headerClassNone {
  	background-color: #eee !important;
}
</style>