From 17f0d84b35188fdfe0d39a9740a472df8ea58aaf Mon Sep 17 00:00:00 2001
From: yuntao1997 <510835147@qq.com>
Date: Fri, 15 Mar 2019 16:00:58 +0800
Subject: [PATCH] feature[Directive]: add auto-height table directive (#1702)

---
 src/directive/el-table/adaptive.js | 42 ++++++++++++++++++++++++++++++
 src/directive/el-table/index.js    | 14 ++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/directive/el-table/adaptive.js
 create mode 100644 src/directive/el-table/index.js

diff --git a/src/directive/el-table/adaptive.js b/src/directive/el-table/adaptive.js
new file mode 100644
index 0000000..3fa29c9
--- /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="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 { 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 0000000..d4cf406
--- /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
-- 
GitLab