zoukankan      html  css  js  c++  java
  • Vue的mixin的一点使用(table的头部sticky的实现)

    大家对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

  • 相关阅读:
    Beta 冲刺 (5/7)
    Beta 冲刺 (4/7)
    Beta 冲刺 (3/7)
    软件产品案例分析(团队)
    Beta 冲刺 (2/7)
    Beta 冲刺 (1/7)
    BETA 版冲刺前准备
    Alpha事后诸葛(团队)
    设计模式——访问者模式
    设计模式——命令模式
  • 原文地址:https://www.cnblogs.com/catgatp/p/12259156.html
Copyright © 2011-2022 走看看