vue中如何获取滚动table的可视页面宽度调整表头与列对齐

这篇文章主要介绍了vue中如何获取滚动table的可视页面宽度调整表头与列对齐，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

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 :>       <th ></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的可视页面宽度调整表头与列对齐”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!