vue中获取滚动table的可视页面宽度,调整表头与…

2019-08-26 05:44:02来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)

mounted() {
     // 在mounted中监听表格scroll事件
this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ......
// target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度
adjustTable(event) {
            this.clientWidth = event.target.clientWidth;
        },
                

获取clientWidth,可以调整表头与列对齐(最后一列的宽度不设置)

<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%  // 最后一列不设宽度,才能表头与列对齐
        }
    }

网上最简单的表头与列对齐,由于我第一列的宽度与其他列宽度不同,导致始终不能对齐。因此我采用以下方法无效

// 表格滚动
table tbody {
    display: block;
    height: 495px;            
    overflow-y: auto;
    overflow-x: hidden;
}
// 表头固定
table thead,
tbody tr { 
    display: table;
    table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */
    width: 100%;
}
// 调整表头与列对齐
table thead {
    width:calc(100%-2em)
}

 


原文链接:https://www.cnblogs.com/yyiyu/p/11363001.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ES6常用的新特性

下一篇:CSS样式表可以挂网页木马