problem: vue中获取动态元素高度
前言:始终要相信你能想到的解决方案,基本上都是可以用技术实现的...
解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检查自己的逻辑,自己在写什么思路一定要清晰。
有这样一个需求:
实现一个表格,每一行代表课程的一期,每一期的天数不固定,每一期有安排老师的要显示老师的数据,也就是要显示一个白条来展示数据,白条的宽度可以根据后端给的开始时间和结束时间来计算间隔数从而算出宽度,而白条高度需要根据内容来自适应,左侧的期数栏的高度也要对应的显示相同的高度。白条中的内容显示体验要好。
思路:
1、根据每期的开始时间定位白条的起始位置,即当前行的哪一个表格
2、白条设置绝对定位,相对对应的表格定位
3、根据开始时间和结束时间,算出白条应设的宽度值(拿到数据就可以算出来,表格的宽度固定的)
4、白条的高度要注意是在白条里面的数据显示渲染完之后再去获取元素的高度值,在table层(一般会是一个组件)的mouned中通过在this.$nextTick()获取数据渲染完成之后的元素
5、获取每一行白条的高度,然后存到数组中
6、当前白条的父元素tr元素和左侧的显示期数的元素设置和填充了数据之后的白条一样的高度
白条的布局:
白条用flex布局,并允许换行,flex-wrap: wrap,里面的内容分两列显示,左侧固定一定百分比的宽度(所以内容长度一定要有最大长度不能太长,必须约定),右侧不设置宽度,如果内容太长就会换行显示,体验会比较好。
低效解决方案:
通过元素个数来算高度,这样必须保证白条里面的内容,在超出最小单元格高度时,元素必须每行显示2个,并且左右两列必须都设置一定比例的宽度,这样才能根据内容的个数准确算出白条的总高度。
这个方案解决了高度随着内容变化而变化的问题,但是没有解决白条里面的内容长度很长时的显示问题,因为白条中左右列宽度是一定的,又是flex布局,内容太长里面的内容就会自动换行,视觉效果很不好。
考虑到显示问题,最终解决方案就应该采用第一种,右侧元素宽度不固定,内容太长自动换行显示,白条高度在数据渲染完毕去读取的方式最合适。
在mounted中的nextTick中去读取每一行白条的高度存在数组中,然后遍历左侧栏元素和右侧表格单元格元素,给元素设置对应的白条的高度。
problem: vue中获取动态元素高度的更多相关文章
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- 如何在onCreate中获取View的高度和宽度
如何在onCreate中获取View的高度和宽度 原文链接:http://mp.weixin.qq.com/s?__biz=MzAwODE1NTI2MQ==&mid=2247483676&am ...
- Android 在OnCreate()中获取控件高度与宽度
试过在OnCreate()中获取控件高度与宽度的童鞋都知道,getWidth()与getHeight()方法返回是0,具体原因 看一下Activity的生命周期 就会明白. 上代码: 方法一: int ...
随机推荐
- 『TensorFlow』读书笔记_SoftMax分类器
开坑之前 今年3.4月份的时候就买了这本书,同时还买了另外一本更为浅显的书,当时读不懂这本,所以一度以为这本书很一般,前些日子看见知乎有人推荐它,也就拿出来翻翻看,发现写的的确蛮好,只是稍微深一点,当 ...
- Codeforces Round #542 [Alex Lopashev Thanks-Round] (Div. 1)C. Morse Code
题意:给你n个01字符,每次问你前缀的所有本质不同的子串,由摩斯密码组成的方案数和. 题解:离线处理,把字符建sam,通过topo序来dp计算每个节点表示的子串方案数的和.统计答案时,把n个字符挨个匹 ...
- oracle连接数据库和连接表的操作
1.连接测试是否连接oracle成功 (1).tnsnames.ora文件配置 oracle65= (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCO ...
- Nginx的使用(一)Nginx+IIS实现一个网站绑定多个https域名
使用nginx最初的目的是为了解决iis7下无法配置多个443端口的问题,iis7下不同的域名无法同时绑定443端口,据说iis8是可以的,但是iis8的话需要安装windows server2012 ...
- asp.net数据加载进度和模态窗口的完美打开,而且窗口不被阻止
采用jquery的技术打开模态窗口,效果肯定不错,但是微软的asp.net ajax就无法用了,例如updatepanel面板和updateprogress就看不到效果,也就是jquery与asp.n ...
- python信号量
同进程的一样 Semaphore管理一个内置的计数器,每当调用acquire()时内置计数器-1:调用release() 时内置计数器+1:计数器不能小于0:当计数器为0时,acquire()将阻塞线 ...
- Python中异常处理
高级语言通常都配置了一套try...except...finally的错误处理机制. 1.我们先看一个try的机制 try: res=1/0except ZeroDivisionError as e: ...
- Linux下不停止服务,清空nohup.out文件
转载:http://www.sucheasy.com/OracleFusionMiddleware/640.html 1.nohup.out的由来及作用 用途:LINUX命令用法,不挂断地运行命令. ...
- git教程: 查看文件状态与修改内容
转载:时光机穿梭 我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed ...
- Gym - 101617F :Move Away (圆的交点)
pro:给定N个圆,求离原点最远的点,满足它在N个圆里.输出这个距离.N<50; sol:关键点一定是圆与圆的交点. 圆与 圆心到原点的直线 的交点. 然后去验证这些关键点是否在N个圆内. 实际 ...