el table 固定表头和首行_vue表格实现固定表头首列

前言

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

效果

思路

要实现固定首行首列

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

首先我们理一下思路

如何固定首行首列呢？

可能每个人有不同的想法

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

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

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

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

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

表头和首列并不会移动

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

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

滑动的时候会触发事件

引起表头和首列的移动

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

代码实现

template:

v-for = "(b,index) in header"

v-if="index==0">

{ {