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 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的可视页面宽度调整表头与列对齐(每列宽度不都相同)，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...相关推荐

mysql 视图列信息_MySQL 中获取用户表、用户视图、用户表中列信息
/// ///MySql 数据库维护中心/// public classMySqlDbMaintenance:DbMaintenanceProvider {/// ///获取视图信息列表 Sql语句/ ...
vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置
1.点击某个标签,滚动到某个具体位置 switchHeight(num) { this.selectNum = num; if (num == 0) { document.getElementById ...
C# html的Table导出到Excel中
C#中导出Excel分为两大类.一类是Winform的,一类是Web.今天说的这一种是Web中的一种,把页面上的Table部分导出到Excel中. Table导出Excel,简单点说,分为以下几步: ...
map中获取数组_如何从php多维数组中获取特定的键值？
点击蓝字关注我们!每天获取最新的编程小知识! 源 / php中文网源 / www.php.cn 在这篇文章中,我们将给大家介绍如何在php中从多维数组中获取特定的键值数组.这里我们将使用a ...
js中获取元素的当前位置
js中获取当前位置有如下几种方法: event.offsetX, (IE属性,测试都可以使用) event.offsetY, (IE属性,测试都可以使用) event.clientX, e ...
但是尚未从池中获取连接_[转载]超时时间已到，但是尚未从池中获取连接!
估计是链接的人过多,而链接没有释放,你可以考虑再链接字符串中把链接池的数量设大些! 如:"server=localhost;user id=sa;password=;pooling=true ...
excel去掉一行文字中的逗号合并在一起_这30个Excel实用技巧，效率大神都忍不住收藏了。...
Excel在日常工作中的重要性,已无需赘言,然而,无论对于初学者和高级用户,在实际应用过程中,仍不可避免地忽略了很多实用的技巧和窍门.文章梳理了30个常用小技巧,分享给大家参考尝试. 1.不复制隐藏的 ...
今天来马克一下把数据库中的数据动态显示到前台页面下拉框中/默认选中
我知道方法应该有很多,但是我觉得我接下来说的方法还是很简单的. 首先最最重要的就是在前台页面页面头部写上 <%@taglib prefix="c" uri="htt ...
vue获取table一列数据_vue中比较重要的小知识点
1.$nextTick的用法 ①解决的问题: 一.element-ui中的对话框中的元素通过this.$refs获取不到二.第一次进入路由created()中操作DOM元素undefined 三.后 ...

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

table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...相关推荐

最新文章

热门文章