快捷導(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)文章

element-ui動態(tài)級聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時候肯定會遇到這樣一個問題,就是在你使用級聯(lián)選擇器的回顯問題,下面這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)級聯(lián)選擇器回顯問題的相關(guān)資料,需要的朋友可以參考下
2023-03-03
詳解Vue 事件驅(qū)動和依賴追蹤
本篇文章主要介紹了詳解Vue 事件驅(qū)動和依賴追蹤，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
vue3 + vite + ts 中使用less文件全局變量的操作方法
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
Vue中動態(tài)class的多種寫法
這篇文章主要介紹了Vue之動態(tài)class的幾種寫法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
vue實現(xiàn)公共方法抽離
這篇文章主要介紹了vue實現(xiàn)公共方法抽離，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue3利用縮放進(jìn)行屏幕分辨率適配的解決方案講解
本文詳細(xì)解析了如何在Vue3中實現(xiàn)一個自動根據(jù)設(shè)計寬度縮放并調(diào)整高度的響應(yīng)式組件,組件的核心功能包括設(shè)計寬度設(shè)定、動態(tài)縮放比例計算和高度調(diào)整,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue.js 底部導(dǎo)航欄一級路由顯示子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導(dǎo)航欄一級路由顯示子路由不顯示的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue?elementui動態(tài)添加el-input實例代碼
最近遇到一個新的需求,需要動態(tài)添加el-input,這篇文章主要給大家介紹了關(guān)于vue?elementui動態(tài)添加el-input的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
Vue3中使用Pinia的方法詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于Vue3中使用Pinia的相關(guān)資料,pinia是一個用于vue的狀態(tài)管理庫,類似于vuex,是vue的另一種狀態(tài)管理工具,文中介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01