现在有一个表格,需要固定高度,当我们传入一个固定的高度时,在不是全屏的状态下看没问题。当我们全屏时,会发现高度不够,如下:
半屏状态下:
全屏:
会发现下面空白了一大片:
这时我们可以动态设置表格的高度:
这里我表格使用的是iview组件,
代码:
<div class="table">
<Table :height="TableHeight" :columns="columns" :data="data">
<template #name="{ row }">
<strong>{{ row.name }}</strong>
</template>
<template #action="{ row, index }">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
<Button type="info" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
<Button type="error" size="small" @click="remove(index)">删除</Button>
</template>
</Table>
</div>
设置height等于一个变量,
let TableHeight = ref(780)//设置初始值
const getCardDetailsTableHeight = () => {
let tableH = 100; //距离页面下方的高度
let tableHeightDetil = window.innerHeight*0.92 - tableH;
if (tableHeightDetil <= 100) {
TableHeight.value = 100;
} else {
TableHeight.value = window.innerHeight*0.92 - tableH;
}
console.log(window.innerHeight)
console.log(TableHeight.value)
};
// 监听窗口变化动态设置表格高度
window.onresize = () => {
getCardDetailsTableHeight()
}
onMounted(() => {
getCardDetailsTableHeight()
})
这样子全屏状态下就没有一大片空白了