如何自动计算element ui的表格高度 达到撑满页面的效果
本来想用指令实现的发现各种报错 最后无奈选择v-bind绑定
1 写一段mixin
mixin部分
import getMaxHeight from "@/mixin/function/fillTable";
const Mixin = {
data() {
return {}
},
computed: {
GetMaxHeight: {
//计算表格剩余最大高度
get: () => (className = 'filtable') => getMaxHeight(className)
},
},
methods: {}
}
export default Mixin
mixin高度计算部分
export default function getMaxHeight(className) {
// 导航栏部分高度 + 页脚分页的高度
let page = 60
let el = document.getElementsByClassName(className)[0]
let h = findParentElement_Height(el)
let windHeight = window.innerHeight
let resultH = windHeight - (h + page)
const handler = {
get: function (target, prop, receiver) {
return Reflect.get(...arguments);
},
set(target, prop, receiver) {
return Reflect.set(...arguments);
},
};
const proxy = new Proxy({}, handler);
// resultH undefined -> 导致计算为NaN
if (!isNaN(resultH)) {
proxy.height = resultH
}
return proxy
}
function findParentElement_Height(el) {
if(el){
// 获取表格元素位于浏览器顶部高度
return el.getBoundingClientRect().top
}
}
vue部分
<el-row class='filtable'>
<el-table ref="tableRef" :data="TableDate" v-bind="GetMaxHeight()">
<el-table-column label="序号" width="50" type="index"></el-table-column>
<el-table-column label="创建人" prop="create_by" width="80"></el-table-column>
<el-table-column label="创建时间" prop="create_time" width="80"></el-table-column>
<el-table-column label="更新人" prop="update_by" width="80"></el-table-column>
<el-table-column label="更新时间" prop="create_time" width="80"></el-table-column>
</el-table>
</el-row>
2 表格错位解决方案
/**
* 在表格查询后 可能会出现错位
* 通过update生命周期中 重新对表格渲染
**/
updated(){
this.$nextTick(() => {
this.$refs.tableRef.doLayout()
})
},