mounted() {　　　　 // 在mounted中監(jiān)聽表格scroll事件    this.$refs.scrollTable.addEventListener( 'scroll',(event) => {      this.adjustTable(event);    });  },......// target中的屬性很多，可以通過控制臺(tái)查看—-clientWidth可以獲取除滾動(dòng)條外的可視區(qū)域?qū)挾萢djustTable(event) {      this.clientWidth = event.target.clientWidth;    },      

獲取clientWidth，可以調(diào)整表頭與列對(duì)齊（最后一列的寬度不設(shè)置）

<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>.......// 表格滾動(dòng)　　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% // 最后一列不設(shè)寬度，才能表頭與列對(duì)齊    }  }

網(wǎng)上最簡(jiǎn)單的表頭與列對(duì)齊，由于我第一列的寬度與其他列寬度不同，導(dǎo)致始終不能對(duì)齊。因此我采用以下方法無效

// 表格滾動(dòng)table tbody {  display: block;  height: 495px;        overflow-y: auto;  overflow-x: hidden;}// 表頭固定table thead,tbody tr {   display: table;  table-layout: fixed; /* 使用表格固定算法 必須配合上面一起使用 */  width: 100%;}// 調(diào)整表頭與列對(duì)齊table thead {  width:calc(100%-2em)}

總結(jié)

以上所述是小編給大家介紹的vue中獲取滾動(dòng)table的可視頁面寬度調(diào)整表頭與列對(duì)齊(每列寬度不都相同)，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！