文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

iview table高度动态设置方法

亚连
发布： 2018-05-30 11:34:55
原创
2551人浏览过

下面我就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。

在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（test）时候发现在别的终端如1368*768的机器上都显示不全，下面就把我的和其他机器上效果图做个对比，如图所示：

一、我的机器

二、别人的机器

三、解决办法

原因就是因为表格高度是固定的，在大分辨率下的屏幕可以显示，小分辨率的屏幕就显示不完全，所以我们需要动态的去设置表格的高度，设置方法如下：

1、iview table的写法：

<Table highlight-row border :columns="columns7" :data="data6" ref="table" :height="tableHeight"></Table>
登录后复制

2、高度设置，初始化的时候就设置

（1）首先在data里面初始化

tableHeight: 450,
登录后复制

（2）初始化

mounted() { 
 // 设置表格高度 
 this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160 
 },
登录后复制

window.innerHeight是浏览器的可用高度，this.$refs.table.$el.offsetTop是表格距离浏览器可用高度顶部的距离，这样就可以完成动态设置了,这样的话就可以适应任何pc端屏幕了

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS实现左边列表移到到右边列表功能

JS中用EL表达式获取上下文参数值的方法

vue渲染时闪烁{{}}的问题及解决方法

以上就是iview table高度动态设置方法的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：怎样操作Angular使用动态加载组件方法实现Dialog 下一篇：怎样使用JS让数组合并和对象合并
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js怎么实现轮播图效果 js实现轮播图的5个关键步骤讲解 轮播图的实现主要包括HTML结构搭建、CSS样式设置、JS控制切换等步骤。1.HTML结构需要包含容器、图片列表、指示器和控制按钮；2.CSS需设置容器尺寸、隐藏溢出内容并使用flex布局排列图片，同时添加过渡动画；3.JS通过修改transform属性实现图片切换，并控制指示器状态同步更新；4.可添加自动轮播功能，使用setInterval定时切换图片；5.为提升交互体验，可添加触摸滑动支持，通过监听touchstart、touchmove、touchend事件实现滑动手势识别；6.性能优化方
2025-06-20 22:33:02
584
js如何控制音频播放 js音频播放控制的4个核心API详解 要控制JavaScript中的音频播放，核心是利用HTML5的元素及其API。1.创建并获取元素；2.使用play()和pause()控制播放与暂停；3.通过volume属性调整音量；4.利用currentTime属性获取或设置播放时间；5.监听ended、timeupdate等事件；6.使用muted属性实现静音控制；7.设置loop属性实现循环播放；8.监听error事件处理加载错误；9.通过渐变volume值实现淡入淡出效果；10.使用标签或多格式支持实现浏览器兼容性。
2025-06-20 22:24:01
798
js如何实现数字滚动效果 数字动态增长动画实现 数字滚动效果的核心实现方式是使用JavaScript，主要有三种方法：1.使用requestAnimationFrame结合数学计算，性能好且控制灵活；2.利用CSSTransitions/Animations实现简单效果；3.使用第三方库如countUp.js，方便但依赖外部资源。推荐第一种方法，通过animateNumber函数在指定时间内平滑更新数字值，结合缓动函数（如easeOutQuad）提升自然度，并可通过调整动画时长、数字格式和颜色优化观感。处理精度问题可采用先放大再缩小的四舍五入
2025-06-20 20:48:02
838
js怎样实现图表数据展示 使用ECharts实现动态数据可视化 ECharts是一个强大的JavaScript图表库，能实现各种数据可视化效果。首先，引入ECharts库到HTML文件中，接着创建DOM容器，使用echarts.init()初始化实例，并通过配置option对象设置图表参数，最后调用myChart.setOption()渲染图表；其次，动态更新数据可通过setInterval()定时修改数据并重新渲染；此外，ECharts提供丰富的图表类型，如折线图展示趋势、柱状图比较类别、饼图显示比例、散点图表现关系等；用户还可通过修改option对象自定
2025-06-20 19:48:02
978
js如何检测用户是否离线 判断网络状态的4种检测技巧！ JavaScript检测用户是否离线主要通过以下方法：1.使用navigator.onLine属性，返回布尔值表示浏览器能否检测到网络连接，但无法确保可访问互联网；2.监听online和offline事件，实时响应网络状态变化；3.利用fetch或XMLHttpRequest发送请求验证真实联网能力；4.结合ServiceWorker实现离线缓存与请求拦截；5.针对间歇性网络连接，采用指数退避重试、设置请求超时、本地缓存等策略提升体验；6.克服navigator.onLine局限性可通过定期请求
2025-06-20 18:15:02
949
js安全xss防御措施_js安全xss防护方法详解 XSS防御的核心在于划分信任边界并严格校验用户输入。1.输入验证是第一道防线，应采用白名单限制输入类型、设置长度限制，并过滤或转义特殊字符，可借助HTMLPurifier等成熟库处理恶意HTML代码。2.输出编码同样关键，需根据输出位置选择不同编码方式：HTML编码用于网页内容、JavaScript编码用于脚本、URL编码用于链接、CSS编码用于样式。3.内容安全策略（CSP）通过HTTP头或meta标签限制资源加载来源，如限制脚本仅来自可信域名、禁止内联脚本、启用报告模式监控违规行为。4.其他
2025-06-20 17:15:01
938
JS怎么实现前端拖拽上传 5行代码完成拖放文件上传功能 拖拽上传的核心在于监听dragenter、dragover、drop事件并阻止默认行为，随后读取文件并通过XMLHttpRequest或fetch上传。具体步骤为：1.获取drop区域并绑定事件；2.阻止默认浏览器行为；3.添加高亮与非高亮样式反馈；4.读取拖入的文件列表；5.使用FormData和XMLHttpRequest逐个上传文件。优化用户体验可从视觉反馈、进度条显示、文件类型校验、错误提示等方面入手。处理大文件需采用分片上传、WebWorker或第三方库。兼容性方面应检测API支持情况
2025-06-20 17:03:02
850
js如何阻止事件冒泡 事件冒泡阻止的2种经典方法 阻止JavaScript事件冒泡的核心方法有1.stopPropagation()：标准方法，用于阻止事件继续向上冒泡；2.cancelBubble：IE时代的属性，设置为true可实现兼容性阻止。事件冒泡指点击等事件从目标元素逐级向上传播至document，可能触发多层响应，通过event.stopPropagation()可在事件处理函数中阻止传播，而cancelBubble则通过赋值实现类似效果，现代开发中常结合两者确保兼容性。实际应用包括限制特定元素的事件影响范围及优化事件处理逻辑。
2025-06-20 16:42:02
156
js如何实现文件上传预览 上传前预览的5种实现技巧！ 上传文件前预览的核心在于利用前端技术让用户提前查看文件内容以避免错误上传。1.使用FileReaderAPI结合标签可实现图片预览；2.通过URL.createObjectURL()方法预览图片或视频，效率更高；3.针对PDF文件，可用pdf.js库解析并渲染到canvas；4.文本文件可通过FileReader读取后显示在textarea或pre标签中；5.复杂文档如Word可借助第三方库如docx.js实现预览。若图片预览模糊，可通过限制尺寸、Canvas重绘或服务器生成缩略图解决；大文件可
2025-06-20 14:54:03
215
js中if条件里能调用函数吗 是的，JavaScript的if条件里可以调用函数。1.函数返回布尔值时直接决定条件结果；2.返回非布尔值时会进行隐式类型转换（如数字0转为false，对象转为true）；3.使用函数可封装复杂逻辑，提升代码可读性和维护性；4.需注意避免副作用和性能问题，如不修改外部状态、缓存耗时计算结果；5.若为异步函数，需用await等待Promiseresolve后再用于条件判断。
2025-06-20 12:24:02
115
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部