vue表格实现固定表头首列

最近在做vue移动端项目，需要做一个可以固定表头首列的表格，而且由于一些原因不能使用任何UI插件，网上找了很久也没什么好方法，所以在解决了问题之后，写下了这篇文章供后来人参考，文章有什么错漏的问题欢迎评论交流。

要实现固定首行首列
除了使用各种UI框架插件外，那就是自己用原生写啦
首先我们理一下思路
如何固定首行首列呢？
可能每个人有不同的想法
我这里当然介绍的是我自己的想法
那就是把首列表头和表格主内容分割开来，如下图
不过这样虽然固定了表头首列
但还是不能实现我们想要的效果
因为你会发现当你滑动tbody的时候
表头和首列并不会移动
相信聪明的你已经有了解决的办法了
那就是给tbody添加一个滑动监听
滑动的时候会触发事件
引起表头和首列的移动
这就是本文固定表头首列的思路

template:

Copy

Javascript:

Copy

CSS:

Copy
    body{        overflow:hidden
    }    .pages{        height:100%;        overflow:hidden;
    }    .content{        margin-top:73px;        margin-left:17px;        width:100%;
    }    .left-content{        width:101px;        float:left;
    }    .right-content{        float:left
    }    .table-body{        width:100%;        overflow:auto;
    }    .table-head{        width:100%;        overflow:hidden;
    }    .left-content .table-body{        overflow:hidden;
    }    .table-left .table{        height:400px;        background-color:#FFFFFF;        overflow:hidden;        margin-right:0;        padding-right:0;
    }    table::-webkit-scrollbar{display:none}    .content-table th, .full-table th{        font-size:14px;        font-family:PingFangSC-Regular;        background:#EAEFF3;        font-weight:400;        color:#176BED;        height:40px;        line-height:40px;        text-align:center;
    }    .content-table td, .full-table td {        line-height: 35px;        text-align: center;        word-wrap: break-word;        word-wrap: normal;        overflow: hidden; 
        -o-text-overflow: ellipsis;        text-overflow: ellipsis;
    }    th,td p{      width:101px;      display: inline-block;      line-height:14px;      padding:auto 0;      margin:auto 0;      vertical-align: middle;
    }    .content-table {        display:block;        background-color:#FFFFFF;
    }    thead,tbody{        background-color:#FFFFFF;
    }

Ps：有什么问题可以在评论区一起探讨

作者：linwene

出处：https://www.cnblogs.com/linwene/p/10169545.html