diff --git a/src/directive/el-table/adaptive.js b/src/directive/el-table/adaptive.js index afa3d1af..4db5f3ae 100644 --- a/src/directive/el-table/adaptive.js +++ b/src/directive/el-table/adaptive.js @@ -1,32 +1,61 @@ +import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'; + +/** + * 用法 + * ... + * 必须设置 height,可以任意值 + */ export default{ + bind(el, binding, vnode, oldVnode) { + el.data = {} + el.resizeListener = () => { + let data = el.data + + if (!data.table) { + return + } + let height = window.innerHeight - el.offsetTop - data.bottomHeight - data.topHeight; + + data.table.layout.setHeight(height) + data.table.doLayout() + } + addResizeListener(el, el.resizeListener) + }, /** - * 仅当 el-table :data属性为动态加载(不包括computed)才会触发此事件,且 已为 el-table 设置 height 的初始值(任何值) 此指令才起作用 + * * @param {*} el * @param {*} binding * binding.value 格式为 { * table: $refs.table, // 表格对象 - * topHeight: 10 // 表格顶边 距离顶部高度,默认值为 10 - * footerHeight: 10 // 表格底部 距离底部高度,默认值为 10 + * topHeight: 140 // 表格顶边 距离顶部高度,默认值为 140 + * bottomHeight: 120 // 表格底部 距离底部高度,默认值为 120 * } * @param {*} vnode * @param {*} oldVnode */ update(el, binding, vnode, oldVnode) { - let topHeight = binding.value.topHeight ? binding.value.topHeight : 10 - let footerHeight = binding.value.footerHeight ? binding.value.footerHeight : 10 + if (el.heightInited) { + return + } + let topHeight = binding.value.topHeight ? binding.value.topHeight : 140 + let bottomHeight = binding.value.bottomHeight ? binding.value.bottomHeight : 120 let table = binding.value.table - let tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight; - table.layout.setHeight(tableHeight) + el.data.table = table + el.data.topHeight = topHeight + el.data.bottomHeight = bottomHeight + + let height = window.innerHeight - el.offsetTop - bottomHeight - topHeight + + table.layout.setHeight(height) table.doLayout() - // 监听窗口大小变化 - window.addEventListener("resize", () => { - tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight - table.layout.setHeight(tableHeight) - table.doLayout() - }) + el.heightInited = true; + + }, + unbind(el) { + removeResizeListener(el, el.resizeListener) } }