vue中获取滚动table的可视页面宽度调整表头与列对
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要介绍了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)
}
总结
以上所述是长沙网络推广给大家介绍的vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，长沙网络推广会及时回复大家的！