使table表格横向和垂直滚动
程序员文章站
2024-03-16 13:12:40
...
想要table表格垂直滚动，加点CSS即可
循环合并表头
本文使用框架为 Vue
<template>
<div class="pages-tables" id="pages-tables" style="overflow-x:scroll;">
<table class="table table-bordered" id="table" cellpadding="0" cellspacing="0" ref="rollingTable">
<thead style="display:block;">
<tr v-for="(x,i) in xList" :key="i">
<th class="rows" :class="{'cross': index == 0 && i == 0}" v-for="(l,index) in x" :key="index" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
</tr>
</thead>
<tbody id="table-body">
<tr v-for="(l,i) in yList" :key="i + 'a'">
<template v-for="(x, xKey) in xField">
<td v-for="(ll,yKey) in l" :key="yKey" v-if="x === yKey" :class="{'cols': yKey == xField[0]}">
{{ yList[i][yKey]}}
</td>
</template>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
maxHeight:'100%',
maxWidth:'100%',
scroll: {
scroller: null
},
xList: [
[
{
field_name: "statis_date",
name: "单号",
colspan: 1, //指定单元格 横向 跨越的 列数
rowspan: 1, //指定单元格 纵向 跨越的 行数
},
{
field_name: "area_name",
name: "计费时间",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name1",
name: "发货客户名称",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name2",
name: "开单金额",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name3",
name: "业务类型",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name4",
name: "产品类型",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name5",
name: "付款",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name6",
name: "提成奖金",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name7",
name: "提成标准",
colspan: 1,
rowspan: 1,
}
],
[
{
field_name: "statis_date",
name: "第一行合3行1列",
colspan: 1, //指定单元格 横向 跨越的 列数
rowspan: 3, //指定单元格 纵向 跨越的 行数
},
{
field_name: "custom_field",
name: "第一行合并2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第一行合并2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第一行合并3列",
colspan: 4,
rowspan: 1,
},
],
[
{
field_name: "custom_field",
name: "第二行日期",
colspan: 1, //指定单元格 横向 跨越的 列数
rowspan: 1, //指定单元格 纵向 跨越的 行数
},
{
field_name: "custom_field",
name: "第二行日期合并2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第二行日期合并2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第二行日期合并3列",
colspan: 3,
rowspan: 1,
},
],
[
{
field_name: "area_name",
name: "第三行当月新增",
colspan: 1, //指定单元格 横向 跨越的 列数
rowspan: 1, //指定单元格 纵向 跨越的 行数
},
{
field_name: "area_name1",
name: "第三行当月新增1",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name2",
name: "第三行当月新增2",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name3",
name: "第三行当月新增3",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name4",
name: "第三行当月新增4",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name5",
name: "第三行当月新增5",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name6",
name: "第三行当月新增6",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name6",
name: "第三行当月新增6",
colspan: 1,
rowspan: 1,
},
],
],
xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6","area_name7"],
yList: [
{
area_name: "新增数据开始",
area_name1: "新增数据开始1",
area_name2: "新增数据开始2",
area_name3: "新增数据开始3",
area_name4: "新增数据开始4",
area_name5: "新增数据开始5",
area_name6: "新增数据开始6",
area_name7: "新增数据开始7",
statis_date: 100001,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201802,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201803,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201804,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201805,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201806,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201807,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201808,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201809,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201810,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201811,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201812,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201813,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201814,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201815,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201816,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201817,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201818,
},
{
area_name: "新增数据",
area_name1: "新增数据1",
area_name2: "新增数据2",
area_name3: "新增数据3",
area_name4: "新增数据4",
area_name5: "新增数据5",
area_name6: "新增数据6",
area_name7: "新增数据开始7",
statis_date: 201819,
},
{
area_name: "新增数据最后",
area_name1: "新增数据最后1",
area_name2: "新增数据最后2",
area_name3: "新增数据最后3",
area_name4: "新增数据最后4",
area_name5: "新增数据最后5",
area_name6: "新增数据最后6",
area_name7: "新增数据开始7",
statis_date: 22220,
}
]
}
},
mounted() {
// this.maxHeight = window.screen.height
this.maxHeight = document.documentElement.clientHeight || document.body.clientHeight;
// this.maxWidth = window.screen.width
this.maxWidth = document.getElementById('table-body').clientWidth || document.body.clientWidth;
console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);
// this.scroll.scroller = createIScroller(".meal-table");
// addWaterMarker(document.getElementById('watermark'))
}
}
</script>
<style lang="scss" scoped>
@media only screen and (width: 375px) and (height: 812px){
}
.pages-tables {
-webkit-overflow-scrolling: touch; // ios滑动顺畅
position: relative;
}
.rolling-table {
display: table;
height: 100%;
font-size: 0.28rem;
color: #86939a;
background-color: #fff;
width: 100%;
-webkit-overflow-scrolling: touch;
position: relative;
}
.rows {
position: relative;
z-index: 3;
}
.cross {
position: relative;
z-index: 5;
}
::-webkit-scrollbar {
display: none;
}
.table {
// border-collapse: collapse; //去掉重复的border
// width: 100%;
margin-bottom: 1rem;
color: #86939e;
font-size: 0.32rem;
border: 0px solid #000;
position: relative;
font-size: 12px;
tr{
position: relative;
background-color: #fff;
height: 2rem;
line-height: 2rem;
/* &:nth-of-type(odd){
td{
// background-color: pink;
}
} */
}
td,th {
// border-bottom: 0.02rem solid #eee;
white-space: nowrap;
width: 100px;
height: 2rem;
line-height: 2rem;
padding: 0 0.2rem;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid #F2F2F2;
}
thead {
display:block;
width:100%;
// display: table-header-group;
// vertical-align: middle;
// border-color: inherit;
/*滚动条默认宽度是16px 将thead的宽度减16px*/
// width: calc( 100% - 16px);
}
tbody {
display: block;
height: 215px;
overflow-y: scroll;
// vertical-align: middle;
border-color: inherit;
overflow: scroll;
position: static;
-webkit-overflow-scrolling: touch;
tr {
display: table;
width: 100%;
table-layout: fixed;
td{
text-align: left;
}
}
}
}
</style>
上一篇： 【JavaSE_学习笔记】List接口的三个子实现类
下一篇： 算法（数组）——最大子数组和