vue3 获取元素高度不准的方法

在 Vue3 应用中,由于浏览器渲染机制和异步更新,直接使用 JavaScript 的 `offsetHeight` 或 `clientHeight` 获取元素高度可能不准确。本文将探讨这个问题并分享如何在 Vue3 的生命周期钩子中正确且实时地获取元素的高度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html:

<transition name="slide-width">
    <a-col class="fixed-small" v-show="isShow" :style="{height: `${ztreeHeight}px`}">
         <div style="height: 500px; ">
             555
         </div>
    </a-col>
</transition>
<a-col class="auto-small-full" :class="{ 'auto-small': isShow }" ref="rightBox">
    <a-table
        :size="state.tableSize"
        :loading="state.loading"
        :columns="dynamicColumns"
        :data-source="state.dataSource"
        :scroll="{ x: 1800 }"
        :pagination="{
        current: state.current,
        pageSize: state.pageSize,
        total: state.total,
        size: 'middle',
        showTotal: total => `共 ${total} 条`,
    }"
        @change="handleTableChange"
    >
        <template #statusOther="{ text }">
            <a-tag :color="statusMap[text].status">
                {{ statusMap[text].text }}
            </a-tag>
        </template>
        <template #action="{ text, record }">
            <a :title="text" @click="detailFuns(record)">查看详情</a>
        </template>
    </a-table>
</a-col>




const rightBox = ref();
let ztreeHeight = ref<number>(0);

onMounted(() => {
    watch(
        () => state.dataSource,
        () => {
            nextTick(()=>{
               $(document).ready(()=>{
                   ztreeHeight.value = rightBox.value.$el.scrollHeight;
               })
            })

        },
    );
});

主要是动态数据请求回来之后获取元素的高度, 谁有更好的想法代码贴给我奥!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值