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 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
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
php 分页原理详解
2009/08/21 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
竞选班长的演讲稿
2014/04/24 职场文书
销售人员工作自我评价
2014/09/21 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
加班费申请报告
2015/05/15 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
MySQL连接控制插件介绍
2021/09/25 MySQL
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技