前言
最近在做vue移动端项目，需要做一个可以固定表头首列的表格，而且由于一些原因不能使用任何UI插件，网上找了很久也没什么好方法，所以在解决了问题之后，写下了这篇文章供后来人参考，文章有什么错漏的问题欢迎评论交流。
效果
思路
要实现固定首行首列
除了使用各种UI框架插件外，那就是自己用原生写啦
首先我们理一下思路
如何固定首行首列呢？
可能每个人有不同的想法
我这里当然介绍的是我自己的想法
那就是把首列表头和表格主内容分割开来，如下图
不过这样虽然固定了表头首列
但还是不能实现我们想要的效果
因为你会发现当你滑动tbody的时候
表头和首列并不会移动
相信聪明的你已经有了解决的办法了
那就是给tbody添加一个滑动监听
滑动的时候会触发事件
引起表头和首列的移动
这就是本文固定表头首列的思路
代码实现
<template>
<div class="pages" ref="pages">
<div class = "content" ref="table">
<!--首列固定(就是只有首列数据)-->
<div class = "left-content">
<div class="table-left"
ref="firstColLayer"
data-_ref="firstColLayer">
<table class= "full-table">
<thead>
<tr v-for = "header in tableHeader">
<th class = "firstCol"
v-for = "(b,index) in header"
v-if="index==0">
<p>{{b}}</p>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in dataSheet">
<td v-for="(c,index) in row" v-if="index==0">
<p>{{c}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class = "right-content" ref="right">
<!--表头固定(就是只有表头数据)-->
<div class = "table-head"
ref="firstRowLayer"
data-_ref="firstRowLayer">
<table class= "full-table">
<thead>
<tr v-for = "header in tableHeader">
<th
v-for = "(b,index) in header"
v-if="index!=0"
style="width:101px"
>
<p>{{b}}</p>
</th>
</tr>
</thead>
</table>
</div>
<!--正常表格内容(只有表格内容，没有表头和首列)-->
<div class="table"
style="overflow:scroll"
ref="tableContainer"
@scroll="tableDivScroll($event)"
>
<table class="content-table">
<tbody ref="tbody">
<tr v-for="row in dataSheet">
<td v-for="(c,index) in row"
v-if="index!=0"
>
<p>{{c}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--第一格固定-->
<div class="table-fixed-layer">
<table class= "full-table">
<thead>
<tr v-for = "header in tableHeader">
<th class = "firstCol"
v-for = "(b,index) in header"
v-if="index==0">
<p>{{b}}</p>
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</template>
<script>
module.exports = (function(that) {
return {
data: function(that) {
const tableHeader = that.dataSheet;
const dataSheet = that.dataSheet;
return {
dataSheet: dataSheet,
tableHeader: tableHeader,
};
},
methods: {
tableDivScroll (event) {
const $target = this.$refs.tableContainer
// 首行固定
this.$refs.firstRowLayer.scrollLeft = $target.scrollLeft
// 首列固定
this.$refs.firstColLayer.scrollTop = $target.scrollTop
}
//定一个生命周期钩子监听变动
mounted:function () {
let maxHeight = window.screen.height
document.body.style.overflow='hidden';
this.$refs.right.style.width=""+this.$refs.table.offsetWidth-107+"px";
},
computed: {
}
}
})(this);
</script>
<style scoped>
body{overflow:hidden}
.pages{
height:100%;
overflow:hidden;
}
.head{
position:absolute;
top:0;
left:0;
height:73px;
padding:16px;
width:100%;
z-index:99;
background:#fff
}
.right-head{
position:absolute;
top:16px;
right:12px;
}
.right-head .subsidiary{
height:17px;
margin:0;
padding:0;
font-size:12px;
font-family:PingFangSC-Regular;
font-weight:400;
color:#A4A8AB;
line-height:17px;
}
.head .title {
height:18px;
font-size:16px;
font-family:PingFangSC-Medium;
font-weight:500;
color:#1D1D1D;
line-height:18px;
padding-bottom:0;
margin-bottom:0;
}
.head .deadline{
margin-top:6px;
height:17px;
font-size:12px;
font-family:PingFangSC-Regular;
font-weight:400;
color:#A4A8AB;
line-height:17px;
}
.content{
margin-top:73px;
margin-left:17px;
width:100%;
}
.left-content{
width:101px;
float:left;
}
.right-content{
float:left
}
.table-body{
width:100%;
height:220px;
overflow:auto;
}
.table-head{
width:100%;
overflow:hidden;
}
.left-content .table-body{
overflow:hidden;
}
.table-left{
height:440px;/*400表格高度加上40表头高度*/
background-color:#FFFFFF;
overflow:hidden;
margin-right:0;
padding-right:0;}
.table{
height:400px;/*表格高低（要修改高度修改这个和table-left注释的那个）*/
background-color:#FFFFFF;
overflow:hidden;
margin-right:0;
padding-right:0;
}
.table::-webkit-scrollbar{display:none}
/*第一格固定css*/
.table-fixed-layer{
position: fixed;
overflow:hidden;
left:17px;
top:73px;
z-index:99;
}
.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\0;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
th p{
width:101px;
display: inline-block;
line-height:14px;
padding:auto 0;
margin:auto 0;
vertical-align: middle;
}
td p{
width:101px;
display: inline-block;
line-height:14px;
padding:auto 0;
margin:auto 0;
vertical-align: middle;
}
.content-table {
display:block;
/*table-layout: fixed;*/
background-color:#FFFFFF;
}
</style>Ps：有什么问题可以在评论区一起探讨