vue3动态设置高度(根据屏幕大小调整)

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

半屏状态下:

全屏:

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值