ac60d3be3be28b1b452171b119aa1f76051fce00.svn-base 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
  2. /**
  3. * How to use
  4. * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
  5. * el-table height is must be set
  6. * bottomOffset: 30(default) // The height of the table from the bottom of the page.
  7. */
  8. const doResize = (el, binding, vnode) => {
  9. const { componentInstance: $table } = vnode
  10. const { value } = binding
  11. if (!$table.height) {
  12. throw new Error(`el-$table must set the height. Such as height='100px'`)
  13. }
  14. const bottomOffset = (value && value.bottomOffset) || 30
  15. if (!$table) return
  16. const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  17. $table.layout.setHeight(height)
  18. $table.doLayout()
  19. }
  20. export default {
  21. bind(el, binding, vnode) {
  22. el.resizeListener = () => {
  23. doResize(el, binding, vnode)
  24. }
  25. // parameter 1 is must be "Element" type
  26. addResizeListener(window.document.body, el.resizeListener)
  27. },
  28. inserted(el, binding, vnode) {
  29. doResize(el, binding, vnode)
  30. },
  31. unbind(el) {
  32. removeResizeListener(window.document.body, el.resizeListener)
  33. }
  34. }