el-table in vue realizes automatic ceiling effect (supports fixed)

<el-table 
:data="tableData" style="margin:10px 0;width: 100%;" 
bordermax-height="800" class="sticky-head" v-sticky="{ top: 0, parent:'#appMainDom' }" >
...
</el-table>

/**
 * Ideas:
 * The distance between the table and the top* Set the distance between the table and the top to make it absorb the top --- offsetTop1
 * Get the scroll bar scroll distance * When the scroll bar scrolls offsetTop1, the table will automatically be topped */
import Vue from 'vue'
const tableStickyObj = {}

const __STICKY_TABLE = {
  // Set style for fixed header doFix (dom, top, data) {
    const { uid, domType, isExist } = data
    const uObj = tableStickyObj[uid]
    const curObj = uObj[domType]
    const headerRect = tableStickyObj[uid].headerRect

    if (!isExist) {
      dom.style.position = 'fixed'
      dom.style.zIndex = '2001'
      dom.style.top = top + 'px'
    }
    uObj.tableWrapDom.style.marginTop = headerRect.height + 'px'

    if (domType === 'fixed') {
      dom.style.left = curObj.left + 'px'
    } else if (domType === 'fixedRight') {
      dom.style.left = curObj.left + 1 + 'px'
    }
  },
  // Unstyle the fixed header removeFix (dom, data) {
    const { uid, domType } = data
    // dom.parentNode.style.paddingTop = 0
    const uObj = tableStickyObj[uid]
    const curObj = uObj[domType]
    dom.style.position = 'static'
    dom.style.top = '0'
    dom.style.zIndex = '0'

    uObj.tableWrapDom.style.marginTop = '0'

    if (domType === 'fixed') {
      curObj.dom.style.top = '0'
    } else if (domType === 'fixedRight') {
      curObj.dom.style.top = '0'
    }
  },
  // Add class to fixed header
  addClass (dom, fixtop, data) {
    fixtop = fixtop || 0
    const isExist = dom.classList.contains('fixed')
    data.isExist = !!isExist
    if (!isExist) { // If it exists, do not add dom.classList.add('fixed')
    }
    this.doFix(dom, fixtop, data)
  },
  // Remove class from fixed header
  removeClass (dom, data) {
    if (dom.classList.contains('fixed')) {
      dom.classList.remove('fixed')
      this.removeFix(dom, data)
    }
  },

  /**
   * Calculate the top distance of an element relative to the parent element* @param {Nodes} e an element* @param {String} domId parent element id
   * @param {Boolean} isParent whether it is a parent element * @returns {Number}
   */
  getPosY(el, domId) {
    let offset = 0
    const pDom = el.offsetParent
    if (pDom != null && '#' + el.id !== domId) {
      offset = el.offsetTop
      offset += this.getPosY(pDom, domId)
    }
    return offset
  },

  // Get the horizontal coordinate of the element (relative to the window)
  getPosX (e) {
    var offset = e.offsetLeft
    if (e.offsetParent != null) offset += this.getPosX(e.offsetParent)
    return offset
  },
  fixHead (scrollDom, el, uid, binding) {
    this.fixHead1(this, { scrollDom, el, uid, binding })
  },
  // The main function to determine whether to fix the header fixHead1: sticky_throttle((_this, { scrollDom, el, uid, binding }) => {
    const top = binding.value.top
    /**
     * myTop is the height of the current element from the scroll parent container.
     * fixtop The absolute positioning height that needs to be set for the current element * parentHeight The height of the scrolling parent container */
    // Table header DOM node const headerWrapDom = el.children[1] // el-table__header-wrapper

    const headerTop = tableStickyObj[uid].headerRect.top
    const scrollTop = scrollDom.scrollTop

    const fixedHeadDom = tableStickyObj[uid].fixed.headerDom
    const fixedHeadRightDom = tableStickyObj[uid].fixedRight.headerDom

    if (scrollTop >= headerTop) {
      const fixtop = top + scrollDom.getBoundingClientRect().top
      // If the header scrolls to the top of the parent container. fixed positioning_this.addClass(headerWrapDom, fixtop, { domType: 'mainBody', uid })
      fixedHeadDom && _this.addClass(fixedHeadDom, fixtop, { domType: 'fixed', uid })
      fixedHeadRightDom && _this.addClass(fixedHeadRightDom, fixtop, { domType: 'fixedRight', uid })
    } else {
      // If the table scrolls up and scrolls into the parent container. Cancel fixed positioning_this.removeClass(headerWrapDom, { domType: 'mainBody', uid })
      fixedHeadDom && _this.removeClass(fixedHeadDom, { domType: 'fixed', uid })
      fixedHeadRightDom && _this.removeClass(fixedHeadRightDom, { domType: 'fixedRight', uid })
    }
  }, 100, { eventType: 'fixHead111' }),
  //
  setHeadWidth(data) {
    this.setHeadWidth1(this, data)
  },
  // When setting the header to be fixed, the width of the header container is set to the width of the table body setHeadWidth1: sticky_debounce((_this, data) => {
    const { el, uid, binding, eventType } = data
    const { scrollDom } = tableStickyObj[uid]
    const headerWrapDom = el.children[1] // el-table__header-wrapper
    const headerH = headerWrapDom.offsetHeight
    const distTop = _this.getPosY(headerWrapDom, binding.value.parent)
    const scrollDistTop = _this.getPosY(scrollDom) // The distance between the scroll bar and the top tableStickyObj[uid].headerRect.top = distTop + headerH - scrollDistTop / 3 // The distance between the header and the top - the height of the header itself - the distance between the scroll bar and the top tableStickyObj[uid].headerRect.height = headerH
    // tableStickyObj[uid].headerRect.width = tableW

    // debugger
    // fixed left/right header
    // Ensure that each refresh is only obtained once // tableStickyObj[uid].fixed.dom = ''
    _this.initFixedWrap({ el, uid, eventType, key: 'fixed', className: 'el-table__fixed', className1: 'el-table__fixed-header-wrapper' })
    _this.initFixedWrap({ el, uid, eventType, key: 'fixedRight', className: 'el-table__fixed-right', className1: 'el-table__fixed-header-wrapper' })

    // debugger
    // Get the width of the current table body const bodyWrapperDom = el.getElementsByClassName('el-table__body-wrapper')[0]
    const width = getComputedStyle(bodyWrapperDom).width
    // Set the width of the table. Here, by default, the widths of multiple tables on a page are the same. So you can directly traverse and assign values, or you can set const tableParent = el.getElementsByClassName('el-table__header-wrapper') separately according to your needs.
    for (let i = 0; i < tableParent.length; i++) {
      tableParent[i].style.width = width
    }
    // debugger
    _this.fixHead(scrollDom, el, uid, binding) // A process to determine whether the top is fixed}),

  initFixedWrap (data) {
    const { key, el, eventType, className, className1, uid } = data
    // Ensure that each refresh only obtains once if (eventType === 'resize' || !tableStickyObj[uid][key].dom) {
      const tableFixedDom = el.getElementsByClassName(className)
      if (tableFixedDom.length) {
        const fixedDom = tableFixedDom[0]
        const arr = fixedDom.getElementsByClassName(className1) //
        const headW = getComputedStyle(fixedDom).width

        tableStickyObj[uid][key].dom = fixedDom
        if (arr.length) {
          const distLeft = this.getPosX(fixedDom) // Distance from the left side of the window const headDom = arr[0]
          headDom.style.width = headW
          tableStickyObj[uid][key].left = distLeft // Pixels from the left side of the window if (key === 'fixedRight') { // The special feature of right-fixed headDom.classList.add('scroll-bar-h0')
            headDom.style.overflow = 'auto'
            headDom.scrollLeft = headDom.scrollWidth
            headDom.style.overflow = 'hidden' // Set to scroll to the end, set to non-scrollable} else {
            headDom.style.overflow = 'hidden'
          }

          tableStickyObj[uid][key].headerDom = headDom // Take the first one}
      }
    }
  },

  //Monitor certain variables of the parent (the parent must have them in order to be monitored)
  watched ({ el, binding, vnode, uid }) {
    // Monitor whether the left navigation bar is folded vnode.context.$watch('isNavFold', (val) => {
      vnode.context.$nextTick(() => {
        setTimeout(() => {
          // debugger
          this.setHeadWidth({ el, uid, binding, eventType: 'resize' })
        }, 200)
      })
    })
  }

}

/**
 * Throttling function: The task will only be executed once within the specified time interval* @param {function} fn
 * @param {Number} interval
 */
function sticky_throttle (fn, interval = 300) {
  let canRun = true
  return function () {
    if (!canRun) return
    canRun = false
    setTimeout(() => {
      fn.apply(this, arguments)
      canRun = true
    }, interval)
  }
}

/**
 * Anti-shake: The task will only be executed once within the specified time interval, and the time will be recalculated if it is triggered again within this time period. (Non-immediate execution version of function anti-shake)
 * When certain events are triggered frequently, resulting in a lot of calculations or very resource-intensive operations, anti-shake can be forced to be executed only once in a continuous period of time * */
function sticky_debounce (fn, delay, config) {
  const _delay = delay || 200
  config = config || {}
  // const _this = this // This this points to common.js
  return function () {
    const th = this // The this points to the instance const args = arguments
    // debounceNum++
    // let str = `, label: ${th && th.listItem && th.listItem.label}`
    if (fn.timer) {
      clearTimeout(fn.timer)
      fn.timer = null
    } else {
      // fn.debounceNum = debounceNum
    }
    fn.timer = setTimeout(function () {
      // str = `, label: ${th && th.listItem && th.listItem.label}`
      fn.timer = null
      fn.apply(th, args)
    }, _delay)
  }
}

// Globally register custom events Vue.directive('sticky', {
  // When the bound element is inserted into the DOM...
  inserted (el, binding, vnode) {
    // Get the ID of the current vueComponent. As a key to store various monitoring events
    const uid = vnode.componentInstance._uid
    // Get the current scrolling container. If the document is scrolling. The parent parameter can be omitted by default const scrollDom = document.querySelector(binding.value.parent) || document.body // TODO: Consider the case where there is no binding.value.parent. If you log in again and go directly to the inner page, if (!tableStickyObj[uid]) {
      tableStickyObj[uid] = {
        uid,
        fixFunObj: {}, // Used to store the scroll event listener of the scroll container setWidthFunObj: {}, // Used to store the event of recalculating the head width after the page is resized autoMoveFunObj: {}, // User storage If it is a local scroll within the DOM element, when the document scrolls, the header of the fix layout also needs to scroll up with the document scrollDomRect: {},
        headerRect: { top: 0, left: 0 },
        fixed: {}, // float left of table fixedRight: {}, // float right of table // binding,
        // el,
        tableWrapDom: el.getElementsByClassName('el-table__body-wrapper')[0],
        scrollDom
      }
    }

    __STICKY_TABLE.watched({ el, binding, vnode, uid }) // Listen to some variables of the parent // When the window is resized, recalculate and set the width of the table header, and store the listening function in the listening function object to facilitate the removal of the listening event window.addEventListener('resize', (tableStickyObj[uid].setWidthFunObj = () => {
      __STICKY_TABLE.setHeadWidth({ el, uid, binding, eventType: 'resize' }) // Set the header width first})
    )

    // Add scroll listener events to the scroll container. And store the listening function in the listening function object to facilitate the removal of the listening event scrollDom.addEventListener('scroll', (tableStickyObj[uid].fixFunObj = (e) => {
      __STICKY_TABLE.fixHead(scrollDom, el, uid, binding)
    }))
  },
  // After component is updated. Recalculate the header width componentUpdated (el, binding, vnode) {
    const uid = vnode.componentInstance._uid
    __STICKY_TABLE.setHeadWidth({ el, uid, binding, eventType: 'componentUpdated' })
  },
  // Remove all listening events when the node is unbound.
  unbind (el, binding, vnode) {
    const uid = vnode.componentInstance._uid
    window.removeEventListener('resize', tableStickyObj[uid].setWidthFunObj)
    const scrollDom = document.querySelector(binding.value.parent) || document
    scrollDom.removeEventListener('scroll', tableStickyObj[uid].fixFunObj)
    if (binding.value.parent) {
      document.removeEventListener('scroll', tableStickyObj[uid].autoMoveFunObj)
    }
  }
})