快捷導(dǎo)航

vue中獲取滾動table的可視頁面寬度調(diào)整表頭與列對齊(每列寬度不都相同)

更新時間：2019年08月17日 10:52:55 作者：一個一

這篇文章主要介紹了vue中獲取滾動table的可視頁面寬度，調(diào)整表頭與列對齊(每列寬度不都相同),需要的朋友可以參考下

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

獲取clientWidth，可以調(diào)整表頭與列對齊（最后一列的寬度不設(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>
.......
// 表格滾動
　　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è)寬度，才能表頭與列對齊
    }
  }

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

// 表格滾動
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)整表頭與列對齊
table thead {
  width:calc(100%-2em)
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下
2023-09-09
vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決elementui導(dǎo)航折疊卡頓的問題
這篇文章主要介紹了解決elementui導(dǎo)航折疊卡頓的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯的完美解決
這篇文章主要介紹了vue中重定向redirect:‘/index‘,不顯示問題、跳轉(zhuǎn)出錯的完美解決方案，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2020-09-09
使用Vue實(shí)現(xiàn)瀑布流的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)瀑布流,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下
2021-08-08
vue中使用vuex的超詳細(xì)教程
這篇文章主要介紹了vue中使用vuex的超詳細(xì)教程，給大家介紹vue項(xiàng)目怎么使用，非常適合初學(xué)者使用，保存數(shù)據(jù)以及獲取數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
常見的5種Vue組件通信方式總結(jié)
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實(shí)現(xiàn)父子組件之間的有效通信,并盤點(diǎn)了常見的5種Vue組件通信方式總結(jié),需要的朋友可以參考下
2024-03-03
vue組件之Alert的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue組件之Alert的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
VUE異步更新DOM - 用$nextTick解決DOM視圖的問題
這篇文章主要介紹了VUE異步更新DOM - 用$nextTick解決DOM視圖的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11