最近接到一个需求: 要求一个表格首行首列固定
大概效果如下：
效果图
环境：vue
大概原理： 就是把表格分成下图的4个模块
说明下为什么使用第5个方案：
我去网上搜了下，想要实现这个需求有以下几个方法：
1.vue-table 插件：但是我不想用，觉得这个比较简单，自己应该就可以实现了，没必要去使用插件
2.fixed定位： 但是由于我的这个表格是一个页面中间的部分，所以fixed 只能根据body定位的这个限制就不可以实现了。
3. 两个表格叠加，使上面的透明度为0 ，但是我觉得这个方法比较剑走偏锋，不太灵活，所以放弃了。
4.使用sticky属性，不适用js，但是只是首列固定，上下滚动的时候首行是不能固定的，left1 也不能固定，没有具体试，只是找了个网上的列子看了下效果，感兴趣的同学可以自己试下
https://blog.csdn.net/Triumph/article/details/80674062
5.就是分为4个表格，然后结果js 去完成
大家可以根据自己的需求使用具体的方案！
页面布局
直接上代码
部分1：封装的一个表格组件，同样适用于没有首行首列固定的
引入的子组件
部分2：父组件： 引用4个子组件，传入不用的参数，显示不用的结果
需要监听right2 的滚动条，然后将left2的位置移动
这里遇到一个坑：
赋值left2 的scrollTop 一直都是0 ，网上有各种说法，可以自行去百度，但是我最后试过都没有解决我的问题。
所以我就改成了transform
父组件
父组件的样式
网友评论