vue3 獲取元素高度不準(zhǔn)的問題
更新時(shí)間：2022年08月19日 17:19:28 作者：xujing_06
這篇文章主要介紹了vue3 獲取元素高度不準(zhǔn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3 獲取元素高度不準(zhǔn)
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;
? ? ? ? ? ? ? ?})
? ? ? ? ? ? })
?
? ? ? ? },
? ? );
});主要是動(dòng)態(tài)數(shù)據(jù)請(qǐng)求回來之后獲取元素的高度。
頁(yè)面獲取元素高度和$el問題
1.最近遇到一個(gè)需求就是vue中遇到 this.refs.elForm.offsetHeight，獲取不到該高度
<el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" > </el-form>
2.然后通過了解才知道，該元素事elementui分裝的元素，需要再獲取的前提加一個(gè)$el(如果是html標(biāo)簽就不用加)
this.refs.elForm.$el.offsetHeight
就可以獲取到其高度。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何通過點(diǎn)擊按鈕切換顯示不同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中保留字符串中的空格的解決方案，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文主要來和大家詳細(xì)講講Vue2中的雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2023-02-02
這篇文章主要介紹了vue項(xiàng)目檢測(cè)依賴包是否有使用的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動(dòng)放大縮小等功能。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下2022-11-11
這篇文章主要介紹了vue如何通過日期篩選數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue 圖片轉(zhuǎn)base64本地路徑跨域方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
Vue支持搜索與篩選的用戶列表實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue支持搜索與篩選的用戶列表實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
Vue項(xiàng)目npm操作npm run serve或npm run dev報(bào)錯(cuò)及二者
這篇文章主要介紹了Vue項(xiàng)目npm操作npm run serve或npm run dev報(bào)錯(cuò)及二者的區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來通過本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03