vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

2022-01-13,,,,

这篇文章主要介绍了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 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的可视页面宽度调整表头与列对齐(每列宽度不都相同),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

以上就是vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)的详细内容,更多请关注本站其它相关文章!

《vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同).doc》

下载本文的Word格式文档,以方便收藏与打印。