您好,登錄后才能下訂單哦!
這篇文章主要介紹Angular8怎么實(shí)現(xiàn)table表格表頭固定效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
效果圖:
html 結(jié)構(gòu)
按區(qū)域劃分可以分為三個(gè)大部分,一共是通過4個(gè)table 組合成一個(gè)整體的table。
然后通過 col 屬性去設(shè)定列的寬度,注意:這里的寬度必須要設(shè)置為固定值。
表頭過濾功能暫時(shí)未實(shí)現(xiàn)。
水平滾動(dòng)效果與垂直滾動(dòng)效果
監(jiān)聽主體table(淺綠色部分)滾動(dòng)事件,同步上下滾動(dòng)頭部的table (深綠色部分)和 左右滾動(dòng)左側(cè)固定的table(紅色部分中的紫色部分)
代碼 1
$(this.tableContent.nativeElement).on('scroll', (e) => { $(this.fixedRowWrapper.nativeElement).prop('scrollTop', $(this.tableContent.nativeElement).prop('scrollTop')); //方式一 :設(shè)置頭部固定列table 的滾動(dòng)條,需要配合less 樣式隱藏滾動(dòng)條(如果不考慮ie9的兼容性,可以使用。less樣式參考代碼2) // $(this.tableHeader.nativeElement).prop('scrollLeft', $(this.tableContent.nativeElement).prop('scrollLeft')) // 方式二:設(shè)置頭部固定列table 的margin-left 屬性為負(fù)值,間接實(shí)現(xiàn)了頭部固定的列同步向左滾動(dòng)效果,兼容ie9 $(this.tableHeader.nativeElement).css({ marginLeft: `${-$(this.tableContent.nativeElement).prop('scrollLeft')}px` }) })
代碼 2
.ngx-table__header-inner { // 隱藏滾動(dòng)條,頁面div 保持橫向滾動(dòng),但是不支持ie9 ,為了兼容性所以沒有使用,ts 中同步滾動(dòng) // 而是動(dòng)態(tài)設(shè)置 ngx-table__header-inner 的margin-left 實(shí)現(xiàn)滾動(dòng)效果 overflow: -moz-scrollbars-none; overflow-x: auto; -ms-overflow-style: none; &::-webkit-scrollbar { width: 0 !important; display: none; } }
以上是“Angular8怎么實(shí)現(xiàn)table表格表頭固定效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。