欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3 獲取元素高度不準(zhǔn)的問題

 更新時間:2022年08月19日 17:19:28   作者:xujing_06  
這篇文章主要介紹了vue3 獲取元素高度不準(zhǔn)的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

主要是動態(tài)數(shù)據(jù)請求回來之后獲取元素的高度。 

頁面獲取元素高度和$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標(biāo)簽就不用加)

this.refs.elForm.$el.offsetHeight

就可以獲取到其高度。

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue封裝組件之上傳圖片組件

    vue封裝組件之上傳圖片組件

    這篇文章主要為大家詳細(xì)介紹了vue封裝組件之上傳圖片組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue自定義鍵盤實現(xiàn)車牌號的示例代碼

    vue自定義鍵盤實現(xiàn)車牌號的示例代碼

    本文主要介紹了vue自定義鍵盤實現(xiàn)車牌號的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Vue3使用contenteditable打造定制化輸入

    Vue3使用contenteditable打造定制化輸入

    contenteditable 屬性為網(wǎng)頁開發(fā)者提供了一種靈活的方式來創(chuàng)建可編輯的內(nèi)容區(qū)域,使用戶可以直接在網(wǎng)頁上進(jìn)行內(nèi)容編輯,而無需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下
    2023-12-12
  • vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

    vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

    這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下
    2023-09-09
  • Vue結(jié)合echarts實現(xiàn)繪制水滴圖

    Vue結(jié)合echarts實現(xiàn)繪制水滴圖

    這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實現(xiàn)水滴圖的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-07-07
  • vue項目中輪詢狀態(tài)更改方式(鉤子函數(shù))

    vue項目中輪詢狀態(tài)更改方式(鉤子函數(shù))

    這篇文章主要介紹了vue項目中輪詢狀態(tài)更改方式(鉤子函數(shù)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 基于ant-design-vue實現(xiàn)表格操作按鈕組件

    基于ant-design-vue實現(xiàn)表格操作按鈕組件

    這篇文章主要為大家介紹了基于ant-design-vue實現(xiàn)表格操作按鈕組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue定義私有過濾器和基本使用

    vue定義私有過濾器和基本使用

    這篇文章主要介紹的是 vue定義私有過濾器和基本使用,下面文章圍繞vue定義私有過濾器的相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下,希望對大家有所幫助
    2021-11-11
  • 基于Vue和Firebase實現(xiàn)一個實時聊天應(yīng)用

    基于Vue和Firebase實現(xiàn)一個實時聊天應(yīng)用

    在本文中,我們將學(xué)習(xí)如何使用Vue.js和Firebase來構(gòu)建一個實時聊天應(yīng)用,Vue.js是一種流行的JavaScript前端框架,而Firebase是Google提供的實時數(shù)據(jù)庫和后端服務(wù),結(jié)合這兩者,我們可以快速搭建一個功能強(qiáng)大的實時聊天應(yīng)用,需要的朋友可以參考下
    2023-08-08
  • Tree-Shaking?機(jī)制快速掌握

    Tree-Shaking?機(jī)制快速掌握

    這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02

最新評論