vue3 獲取元素高度不準的問題
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
就可以獲取到其高度。
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。