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

mounted() {
　　　　 // 在mounted中监听表格scroll事件
 this.$refs.scrollTable.addEventListener( 'scroll',(event) => {
 this.adjustTable(event);
 });
 },
......
// target中的属性很多，可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度
adjustTable(event) {
 this.clientWidth = event.target.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)
}