前言

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

效果

思路

要实现固定首行首列

除了使用各种UI框架插件外，那就是自己用原生写啦

首先我们理一下思路

如何固定首行首列呢？

可能每个人有不同的想法

我这里当然介绍的是我自己的想法

那就是把首列表头和表格主内容分割开来，如下图

不过这样虽然固定了表头首列

但还是不能实现我们想要的效果

因为你会发现当你滑动tbody的时候

表头和首列并不会移动

相信聪明的你已经有了解决的办法了

那就是给tbody添加一个滑动监听

滑动的时候会触发事件

引起表头和首列的移动

这就是本文固定表头首列的思路

代码实现

template:

JavaScript:

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";//这里的减107是减去左侧div宽度

console.log(this.placeholderTop)

}

}

})(this);

CSS:

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\0;

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：有什么问题可以在评论区一起探讨