vue中获取滚动table的可视页面宽度

vue

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% // 最后一列不设宽度,才能表头与列对齐

}

}

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

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

// 表格滚动

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的可视页面宽度 的全部内容, 来源链接: utcz.com/z/375318.html

回到顶部