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

前端  /  管理员 发布于 4年前   392

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

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

.......// 表格滚动　　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的可视页面宽度调整表头与列对齐(每列宽度不都相同)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• 使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
• VUE前后端学习tab写法实例
• vue子路由跳转实现tab选项卡
• vue滚动tab跟随切换效果
• Vue.js实现tab切换效果
• Vue可自定义tab组件用法实例