vue3动态设置高度（根据屏幕大小调整）

最新推荐文章于 2025-03-10 17:06:57 发布

原创最新推荐文章于 2025-03-10 17:06:57 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

现在有一个表格，需要固定高度，当我们传入一个固定的高度时，在不是全屏的状态下看没问题。当我们全屏时，会发现高度不够，如下：

半屏状态下：

全屏：

会发现下面空白了一大片：

这时我们可以动态设置表格的高度：

这里我表格使用的是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()
})

这样子全屏状态下就没有一大片空白了