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之卸载鼠标事件的代码
May 14 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
Three.js快速入门教程
2016/09/09 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
非常实用的vue导航钩子
2017/03/20 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python基于右递归解决八皇后问题的方法
2015/05/25 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
开始着手第一个Django项目
2015/07/15 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
什么是Rollback Segment
2013/04/22 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
幼儿园中秋节活动反思
2014/02/16 职场文书
车间安全生产标语
2014/06/06 职场文书
班组拓展活动方案
2014/08/14 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
导游词之镇江焦山
2019/11/21 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL