vue3獲取元素高度不準的問題怎么解決

這篇文章主要介紹“vue3獲取元素高度不準的問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“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;
               })
            })
 
        },
    );
});

主要是動態數據請求回來之后獲取元素的高度。 

頁面獲取元素高度和$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獲取元素高度不準的問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。