mounted() { // 在mounted中監(jiān)聽(tīng)表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); },......// target中的屬性很多,可以通過(guò)控制臺(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ì)齊。因此我采用以下方法無(wú)效
// 表格滾動(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的可視頁(yè)面寬度調(diào)整表頭與列對(duì)齊(每列寬度不都相同),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注