增加 el-table 自适应高度组件
This commit is contained in:
parent
9574643e92
commit
02663d95f4
|
@ -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()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
Loading…
Reference in New Issue