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

  • 相关阅读:
    生成函数解决多重集合的计数问题
    kmp板子
    poj1001
    【题解】洛谷P1315 [NOIP2011TG] 观光公交(前缀和+贪心)
    【题解】洛谷P1941 [NOIP2014TG] 飞扬的小鸟(背包DP)
    【题解】洛谷P2679 [NOIP2015TG] 子串(DP+滚动数组)
    【题解】洛谷P1514 [NOIP2010TG] 引水入城(DFS+DP)
    【题解】洛谷P1052 [NOIP2005TG] 过河(DP+离散化)
    [arc063F]Snuke's Coloring 2-[线段树+观察]
    [agc001E]BBQ Hard[组合数性质+dp]
  • 原文地址:https://www.cnblogs.com/catgatp/p/12259156.html
Copyright © 2011-2022 走看看