这篇文章主要介绍“vue3获取元素高度不准的问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3获取元素高度不准的问题怎么解决”文章能帮助大家解决问题。
html:
<transition name="slide-width">
<a-col class="fixed-small" v-show="isShow" :>
<div >
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;
})
})
},
);
});
主要是动态数据请求回来之后获取元素的高度。
1.最近遇到一个需求就是vue中遇到 this.refs.elForm.offsetHeight,获取不到该高度
<el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" >
</el-form>
2.然后通过了解才知道,该元素事elementui分装的元素,需要再获取的前提加一个$el(如果是html标签就不用加)
this.refs.elForm.$el.offsetHeight
就可以获取到其高度。
关于“vue3获取元素高度不准的问题怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。