增加 el-table 自适应高度组件

This commit is contained in:
zhouyuntao 2019-03-13 12:29:55 +08:00
parent 9574643e92
commit 02663d95f4
2 changed files with 46 additions and 0 deletions

View File

@ -0,0 +1,32 @@
export default{
/**
* 仅当 el-table :data属性为动态加载不包括computed才会触发此事件
* @param {*} el
* @param {*} binding
* binding.value 格式为 {
* table: $refs.table, // 表格对象
* topHeight: 10 // 表格顶边 距离顶部高度,默认值为 10
* footerHeight: 10 // 表格底部 距离底部高度,默认值为 10
* }
* @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
let table = binding.value.table
let tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight;
table.layout.setHeight(tableHeight)
table.doLayout()
// 监听窗口大小变化
window.addEventListener("resize", () => {
tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight
table.layout.setHeight(tableHeight)
table.doLayout()
})
}
}

View File

@ -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