Vue的mixin的一点使用(table的头部sticky的实现）

最新推荐文章于 2025-04-02 11:19:56 发布

转载最新推荐文章于 2025-04-02 11:19:56 发布 · 918 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b97a43bf265da0ac9628639

文章标签：

#javascript #ViewUI

本文介绍如何使用 Vue.js 的 mixin 在 Element UI 的表格组件中实现 Sticky 功能，解决表格滚动时头部消失的问题。通过计算偏移量并监听滚动事件，确保表格头部始终可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家对mixin应该熟悉，它能全局或者配置mixin的组件添加公共属性与方法。这里展示一次具体的使用。

在使用element-ui时（别的场景一样出现），table过长时滚动时，头部滚出视图了，就无法知道下面内容每一列代表啥。这里的实现方案采用sticky即可，即滚出视图让列表的头部固定在顶部。

这里采用mixin来实现，需要的页面配置mixin即可，代码如下

// 引入计算偏移的方法和节流方法
import OffsetManage from '@flyme/utils/lib/domUtils/OffsetManage'
import throttle from '@flyme/utils/lib/helper/throttle'


const tableHeaderFixMixin = {
  mounted() {
    // SPA页面使用了vue-router
    this.routerViewEl = document.querySelector('.main-router-view')
    if (this.routerViewEl) {
      // 节流
      this.scrollFn = throttle(() => {
        // 滚出添加fixed样式，否则去除
        if (this.tableHeader) {
          const top = parseInt(this.tableHeader.dataset.top)
          if (this.routerViewEl.scrollTop > top) {
            this.tableHeader.classList.add('fixed-table-header')
            this.tableHeader.style.width = this.tableHeader.parentNode.offsetWidth + 'px'
          } else {
            this.tableHeader.classList.remove('fixed-table-header')
            this.tableHeader.style.width = '100%'
          }
        }
      }, 90)
      this.routerViewEl.addEventListener('scroll', this.scrollFn)
      this.$nextTick(() => {
        this.initStickyTableHeader()
      })
    }

  },

  beforeDestroy() {
    // 记得销毁
    this.routerViewEl.removeEventListener('scroll', this.scrollFn)
  },

  methods: {
    // 初始化datatable的header的sticky
    initStickyTableHeader() {
      this.tableHeader = document.querySelector('.el-table__header-wrapper')
      if (this.tableHeader) {
        this.tableHeader.dataset.top = OffsetManage.top(this.tableHeader)
      }
    },
  },
}

export { tableHeaderFixMixin }
复制代码

具体使用

import { tableHeaderFixMixin } from '../mixins'

export default {
  ...
  mixins: [tableHeaderFixMixin],
  ...
}
复制代码

转载于:https://juejin.im/post/5b97a43bf265da0ac9628639