介绍 vue是什么 安装(),{
,//在安装中监听表格滚动事件
,,,这个。refs.scrollTable.addEventListener美元(,& # 39;滚动# 39;,(事件),=祝辞,{
,,,,,this.adjustTable(事件);
,,,});
,,},
……//,目标中的属性很多,可以通过控制台查看——clientWidth可以获取除滚动条外的可视区域宽度
adjustTable(事件),{
,,,,,this.clientWidth =, event.target.clientWidth;
,,,}, & lt; table 类=癱l-body-table",单元格边距=?”,单元格间距=?”;在
,,,& lt; thead :比;
,,,,,& lt; th 祝辞& lt;/th>
,,,,,& lt; th 类=癱l-thead-th"祝辞& lt;/th>
,,,& lt;/thead>
,,,& lt; tbody> & lt;/tbody>
& lt;/table>
……//,表格滚动
table tbody {
显示:块;
身高:495 px;
overflow-y:汽车;
overflow-x:隐藏;
}//,表头固定
table thead,
tbody tr {
显示:表;
表布局:固定,,/*,使用表格固定算法,必须配合上面一起使用,*/宽度:100%;
}//列宽度
.cl-thead-th {
,,,,.is-not-last {
,,,,,宽度:13.142857143%,//,最后一列不设宽度,才能表头与列对齐
,,,}
以前,,} //,表格滚动
table tbody {
,,显示:块;
,,身高:495 px,,,,,,,
,,overflow-y:汽车;
overflow-x才能:隐藏;
}//,表头固定
table thead,
{tbody tr
,,显示:表;
表布局才能:固定,,/*,使用表格固定算法,必须配合上面一起使用,*/,,宽度:100%;
}//,调整表头与列对齐
table thead {
宽度:才能calc (100% 2 em)
}
这篇文章主要介绍了vue中如何获取滚动表的可视页面宽度调整表头与列对齐,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
获取clientWidth,可以调整表头与列对齐(最后一列的宽度不设置)
网上最简单的表头与列对齐,由于我第一列的宽度与其他列宽度不同,导致始终不能对齐。因此我采用以下方法无效
感谢你能够认真阅读完这篇文章,希望小编分享的“vue中如何获取滚动表的可视页面宽度调整表头与列对齐”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
