使table表格横向和垂直滚动

向右看齐 2023-05-30 06:09 7阅读 0赞

想要table表格垂直滚动，加点CSS即可  
循环合并表头  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70]  
本文使用框架为 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107180058482.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE=,size_16,color_FFFFFF,t_70