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) }
总结
以上所述是小编给大家介绍的vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。