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
就可以获取到其高度。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)