vue element table表格高度自适应

利用vue自定义指令的方式实现页面对table高度自适应

1. 新建adaptive.js文件

import ResizeObserver from 'resize-observer-polyfill'

const isServer = typeof window === 'undefined'

/* istanbul ignore next */
const resizeHandler = function (entries) {
  for (let entry of entries) {
    const listeners = entry.target.__resizeListeners__ || []
    if (listeners.length) {
      listeners.forEach((fn) => {
        fn()
      })
    }
  }
}

/* istanbul ignore next */
export const addResizeListener = function (element, fn) {
  if (isServer) {
    return
  }
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = []
    element.__ro__ = new ResizeObserver(resizeHandler)
    element.__ro__.observe(element)
  }
  element.__resizeListeners__.push(fn)
}

/* istanbul ignore next */
export const removeResizeListener = function (element, fn) {
  if (!element || !element.__resizeListeners__) {
    return
  }
  element.__resizeListeners__.splice(
    element.__resizeListeners__.indexOf(fn),
    1
  )
  if (!element.__resizeListeners__.length) {
    element.__ro__.disconnect()
  }
}
/**
 * How to use
 * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
 * el-table height is must be set
 *  bottomOffset: 30(default)   // The height of the table from the bottom of the page.
 */

const doResize = (el, binding, vnode) => {
  const { el: $table } = vnode

  const { value } = binding
  if (!value.fixedHeader) {
    return
  }
  // if (!$table.offsetHeight) {
  //   throw new Error("el-$table must set the height. Such as height='100px'");
  // }
  const bottomOffset = (value && value.bottomOffset) || 70
  if (!$table) {
    return
  }

  const layout = document.getElementById('app')
  setTimeout(() => {
    const height =
            window.innerHeight - el.getBoundingClientRect().top - bottomOffset
    const layoutHeight = layout.clientHeight
    layoutHeight > 810
      ? (layout.style.minHeight = '810px')
      : (layout.style.minHeight = 'auto')
    $table.style.height = height + 'px'
    // $table.doLayout();
  }, 600)
}

export default {
  beforeMount (el, binding, vnode) {
    el.resizeListener = () => {
      doResize(el, binding, vnode)
    }

    addResizeListener(window.document.body, el.resizeListener)
  },
  mounted (el, binding, vnode) {
    doResize(el, binding, vnode)
  },
  unmounted (el) {
    const layout = document.getElementById('app')
    layout.style.minHeight = '810px'
    removeResizeListener(window.document.body, el.resizeListener)
  }
}

2. 新建index.js文件

import adaptive from './adaptive'
const install = function (Vue) {
  Vue.directive('el-height-adaptive-table', adaptive)
}
if (window.Vue) {
  window['el-height-adaptive-table'] = adaptive
    Vue.use(install); // eslint-disable-line
}
adaptive.install = install
export default adaptive

3. 在需要table表格的vue文件中引入文件

<el-table height="100px" v-el-height-adaptive-table="adaptive"></el-table>


import elHeightAdaptiveTable from '@/directives/el-table'
export default {
	data () {
		return {
			adaptive: { fixedHeader: true, bottomOffset: 0 }
		}
	}
}