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 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
Javascript事件实例详解
Nov 06 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jQuery filter函数使用方法
May 19 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
javascript实现简易计算器
Feb 01 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
JavaScript设计模式之原型模式详情
Jun 21 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设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
python开发之list操作实例分析
2016/02/22 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python网络编程详解
2017/10/31 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python argparse模块使用方法解析
2020/02/20 Python
python求前n个阶乘的和实例
2020/04/02 Python
学python需要去培训机构吗
2020/07/01 Python
详解Anaconda 的安装教程
2020/09/23 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
部队学习十八大感言
2014/01/11 职场文书
诚信承诺书模板
2014/05/26 职场文书
小组口号大全
2014/06/09 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
Java版 简易五子棋小游戏
2022/05/04 Java/Android