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


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

Javascript 相关文章推荐
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
详解redux异步操作实践
Aug 15 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 #Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 #Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 #Javascript
微信小程序框架的页面布局代码
Aug 17 #Javascript
vue实现滑动到底部加载更多效果
Oct 27 #Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
You might like
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
详解json在php中的应用
2018/09/30 PHP
利用js对象弹出一个层
2008/03/26 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
python处理cookie详解
2014/02/07 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
python3 求约数的实例
2019/12/05 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
别名指示符是什么
2012/10/08 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
考试作弊检讨
2015/01/27 职场文书
图书馆义工感想
2015/08/07 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL