好资源导航 » 文章资讯 » vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

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

2023-08-17 00:53:05 62

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

获取clientWidth，可以调整表头与列对齐（最后一列的宽度不设置）








.......
//表格滚动
tabletbody{
display:block;
height:495px;
overflow-y:auto;
overflow-x:hidden;
}
//表头固定
tablethead,
tbodytr{
display:table;
table-layout:fixed;/*使用表格固定算法必须配合上面一起使用*/
width:100%;
}
//列宽度
.cl-thead-th{
&.is-not-last{
width:13.142857143%//最后一列不设宽度，才能表头与列对齐
}
}

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

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

总结

以上所述是小编给大家介绍的vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐