当前位置： 移动技术网 > IT编程>网页制作>CSS > vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同)

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

2019年08月16日  | 移动技术网IT编程  | 我要评论 
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)
}

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网