vue3 获取元素高度不准的问题

目录 vue3 获取元素高度不准 页面获取元素高度和$el问题

vue3 获取元素高度不准

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;
? ? ? ? ? ? ? ?})
? ? ? ? ? ? })
?
? ? ? ? },
? ? );
});

主要是动态数据请求回来之后获取元素的高度。 

页面获取元素高度和$el问题

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 获取元素高度不准的问题的详细内容...