diff --git a/src/directive/el-table/adaptive.js b/src/directive/el-table/adaptive.js new file mode 100644 index 00000000..3fa29c91 --- /dev/null +++ b/src/directive/el-table/adaptive.js @@ -0,0 +1,42 @@ + +import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event' + +/** + * How to use + * ... + * 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 { componentInstance: $table } = vnode + + const { value } = binding + + if (!$table.height) { + throw new Error(`el-$table must set the height. Such as height='100px'`) + } + const bottomOffset = (value && value.bottomOffset) || 30 + + if (!$table) return + + const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset + $table.layout.setHeight(height) + $table.doLayout() +} + +export default { + bind(el, binding, vnode) { + el.resizeListener = () => { + doResize(el, binding, vnode) + } + + addResizeListener(el, el.resizeListener) + }, + inserted(el, binding, vnode) { + doResize(el, binding, vnode) + }, + unbind(el) { + removeResizeListener(el, el.resizeListener) + } +} diff --git a/src/directive/el-table/index.js b/src/directive/el-table/index.js new file mode 100644 index 00000000..d4cf406d --- /dev/null +++ b/src/directive/el-table/index.js @@ -0,0 +1,14 @@ + +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