vue中如何獲取滾動(dòng)table的可視頁面寬度調(diào)整表頭與列對(duì)齊

這篇文章主要介紹了vue中如何獲取滾動(dòng)table的可視頁面寬度調(diào)整表頭與列對(duì)齊，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

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

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

<table class="cl-body-table" cellpadding="0" cellspacing="0">
    <thead :>
      <th ></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)
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中如何獲取滾動(dòng)table的可視頁面寬度調(diào)整表頭與列對(duì)齊”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!