vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)
时间:2019-08-16
本文章向大家介绍vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同),主要包括vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
mounted() {
// 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ......
// target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度
adjustTable(event) { this.clientWidth = event.target.clientWidth; },
获取clientWidth,可以调整表头与列对齐(最后一列的宽度不设置)
<table class="cl-body-table" cellpadding="0" cellspacing="0">
<thead :style="{'width':clientWidth+'px'}">
<th style="width:8%"></th>
<th class="cl-thead-th"></th>
</thead>
<tbody></tbody>
</table>
.......
// 表格滚动
table tbody {
display: block;
height: 495px;
overflow-y: auto;
overflow-x: hidden;
}
// 表头固定
table thead,
tbody tr {
display: table;
table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */
width: 100%;
}
//列宽度
.cl-thead-th { &.is-not-last { width:13.142857143% // 最后一列不设宽度,才能表头与列对齐 } }
网上最简单的表头与列对齐,由于我第一列的宽度与其他列宽度不同,导致始终不能对齐。因此我采用以下方法无效
// 表格滚动 table tbody { display: block; height: 495px; overflow-y: auto; overflow-x: hidden; } // 表头固定 table thead, tbody tr { display: table; table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */ width: 100%; } // 调整表头与列对齐 table thead { width:calc(100%-2em) }
原文地址:https://www.cnblogs.com/yyiyu/p/11363001.html
- 大坑记录 - shell脚本删除操作
- mysql5.7 创建新表时提示时间戳非法
- #测试框架推荐# test4j,数据库测试
- C语言中的封装 - 答读者问
- pip is configured with locations that require TLS/SSL, however the ssl module in Python is not avail
- 为什么SOA如此重要
- Grunt配置及使用
- 如何快速掌握一门技术
- golang五周岁
- 写作工具的取经之路
- 听说,这个是CTF中最重要的问题······
- 写本Racket入门书
- 走进 racket(lisp) 的世界
- 那些年,我追过的绘图语言(续)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- adb 模拟上下左右滑动,示例演示
- python 技术篇-pythoncom.PumpMessag()关闭、杀死它的进程,pythoncom.PumpMessag()运行卡住解决办法
- PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写
- 恕我直言你可能真的不会java第6篇:Stream性能差?不要人云亦云
- python-技术篇-打印详细报错日志,获取报错信息位置行数
- React从入门到放弃,一个关于网页速度的故事
- python 技术篇-日志定期清理设置,自动清理上个月的日志实例演示
- python 技术篇-日志模块自定义时间格式
- 恕我直言你可能真的不会java第12篇-如何使用Stream API对Map元素排序
- JavaScript错误处理完全指南
- 从头创建您自己的vue.js——第4部分(构建反应性)
- Oracle 数据库-服务器端字符集查看方法
- Pywinauto 应用后端类型选择错误:AttributeError: 'NoneType' object has no attribute 'backend'. 原因及解决办法
- 恕我直言你可能真的不会java第11篇-Stream API终端操作
- Python+selenium 自动化-滚动的使用方法,如何滚动到元素的位置