vue 页面获取元素高度和$el的问题

最新推荐文章于 2024-08-16 07:38:35 发布
最新推荐文章于 2024-08-16 07:38:35 发布
阅读量5.8k 收藏 4
点赞数 3
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/weixiaoliang/p/11446949.html
版权

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

 就可以获取到其高度

 

转载于:https://www.cnblogs.com/weixiaoliang/p/11446949.html

dmd82119
关注
vue3 获取元素高度不准的方法
xujing_06的博客
05-27 2639
<transition name="slide-width"> <a-col class="fixed-small" v-show="isShow" :style="{height: `${ztreeHeight}px`}"> <div class="left-small"> <a-tree checkable :tree-data="menuTreeD.
vue获取元素距离页面顶部的距离_vue+ts+装饰器 @Ref 获取元素距离顶部的位置
weixin_39963053的博客
01-12 4265
点击@Ref() readonly ceshimounted() {this.$nextTick(() => {console.log(this.ceshi.$el.offsetTop)console.log(this.ceshi.$el.getBoundingClientRect().top)})}// 这个是滚动的调用goSome() {utils.scrollToAppoint(thi...
通过ref让element-ui的表格高度自适应
weixin_43064669的博客
10-25 1350
首先在table上绑定ref <template> <el-table ref="tableRef" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width...
Vue获取元素高度
qq_57749525的博客
01-09 1490
// 当前区域 <div ref="element"></div> // 获取高度值 （内容高+padding+边框） let height= this.$refs.element.offsetHeight; //100 // 获取元素样式值 （存在单位） let height = window.getComputedStyle(this.$refs.element).height; // 100px //获取元素内联样式值（非内联样式无法获取） let height...
深入 Vue.js 的心脏：全面剖析 $el 属性
最新发布
weixin_63490470的博客
08-16 1223
el。
vue获取元素高度值
Hassan的小博客!
12-08 1034
vue获取元素高度值
vue封装el-form实现高度配置化
hbfuas的博客
11-26 6434
封装： <template> <el-form v-bind="$attrs" v-on="$listeners" ref="form"> <el-form-item v-for="(item,index) in items" v-bind="getItemAttrs(item)" v-on="getItemListeners(item)"> <template v
Vue使用this.$refs.xxx.$el获取不到DOM元素的一种解决方案
halozhy的博客
11-20 4224
起因 之前看有的文章说Vue中获取元素高度宽度是给元素标签加上 ref="xxx"，之后用 this.$refs.xxx。但是又有人说用 this.$refs.xxx.$el，感觉有点迷 方案 给对应的标签加上 ref="xxx"之后 对于原生的 HTML 元素，拿 DOM 用 this.$refs.xxx 对于封装过的 Vue 组件，拿 DOM 用 this.$refs.xxx.$el 另外 如果是能拿到 DOM，但是拿不到里面的具体属性（比如offsetHeight），可以看一下这篇文章 https
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
vue+elementUI 实现内容区域高度自适应的示例
10-14
高度值是通过JavaScript获取窗口的innerHeight属性，然后减去顶部和底部的固定高度得到的。这样，当内容区域的高度变化时，整个页面的布局可以保持自适应。在`methods`对象中定义了一个名为`getHeight`的方法，该...
Vue 自适应高度表格的实现方法
10-15
它获取表格的DOM对象，然后根据当前窗口的高度和预设的底部偏移值来计算表格的高度，并设置到`el-table`的`layout.setHeight`方法中。 3. 在自定义指令的`bind`、`inserted`和`unbind`这三个生命周期钩子中分别进行...
vue-elementui表单验证一直无法获取数据问题
m0_73958405的博客
04-19 469
vue-elementui表单验证一直无法获取数据问题，form中:movel、ref、:rules三个属性都为必需值且必须正确
Vue动态获取、设置组件高度
daiyi666的博客
03-02 5481
<template> <el-row> <el-col :span="24"> <el-row ref="headerMenu" class="header-menu"> <el-col :span="24"> <el-menu router mode="horizontal"> <el-menu-item index="1" route="/gl
vue获取不到页面元素高度
树上骑个猴的博客
12-18 1780
比如我我想获取el-form的高度 <el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" > </el-form> 1.不要在created里面获取，因为界面dom还没挂载到页面上 2.el-form是elementui封装的元素，需要再获取的前提加一个$el， 就可以获取到其高度 this.refs.elForm.$el.offsetHeight 如果是
vue获取dom宽度高度
weixin_41463944的博客
06-02 1292
console.log('宽度') console.log(this.$refs['dialogForm'].$el.clientWidth) console.log('高度') console.log(this.$refs['dialogForm'].$el.clientHeight)
Vue.js之初始化el
m0_64828880的博客
05-22 443
new Vue()中 el:'#app',以new Vue({}).$mount('#app');的用法
$ref和$el的区别
n_j_q的博客
09-01 161
$ref和$el的区别
vue获取宽高为0
u014788505的博客
02-15 1749
//两部分要注意： //1.样式写在样式类里面 要使用下面的方式获取 getHeight(){ let chart = document.getElementById("alarm_chart") console.log(window.getComputedStyle(chart).width,'获取样式') } //2.获取的这个元素的样式 .alarm_chart { width: 100vw; height: 30rem; } //要用vh或者rem为单位 不能用100%.
Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail
热门推荐
CSDN博客主页地址：https://mengjian.blog.csdn.net/
11-12 1万+
Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail
vue js 获取盒子的高度
05-11
你可以使用 Vue.js 的 `ref` 属性来获取一个元素的高度。...在该函数中，我们使用 `this.$refs.myBox` 来获取元素的引用，然后使用 `offsetHeight` 属性来获取该元素的高度。最后，我们将高度打印到控制台中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值