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

本文vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)到此结束。如果幸福是一条尾巴,那么每当我追逐自我的尾巴时,它总是一躲再躲,而当我着手做自我的事情时,它总是形影不离地伴随着我。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能