table固定表头固定列实现横向纵向滚动

大致思路是：建立两个table，一个table里只有thead，一个table里只有tbody，分别把两个table用div包裹起来，设置有tbody的div固定高度，超出overflow:scroll；至于横向滚动的问题，可以设置position: sticky，然后根据左右浮动的个数及对应列所在的index，计算left或者right的长度。

因为table里thead和tbody本身无法设置高度，超出用stroll这种方式，无效。所以考虑用div来包裹，然后设置高度超出stroll，因为要实现表头固定，body滚动，所以把thead单独提出来作为一个表格，然后用定位的方式并成一个完整的表格。

sticky是position的新属性值，叫黏性定位。它是一个在static和fixed变化的属性，当你的内容位置没有超过容器范围时，它是正常布局，你设置的定位属性（left，right等)是无效的；当你的内容位置超出了容器的范围时，它会变成fixed定位，定位位置根据你设置的left，right的值来定位。

了解了sticky的用法，自然就知道怎么来实现固定列横向滚动表格了。这里贴一个thead表格的横向滚动写法，tbody的表格是一样的。

实现了竖直滚动表头固定，表头和表体可以横向滚动，但是遇到一个问题：表头和表体的滚动是分开的，各滚各的，显然不是我们要的效果，所以，需要实现表头和表体的同步滚动，这里需要用到scroll事件。

在react函数组件里，要 *** 作组件内的dom元素，需要用到useRef来获取dom的实例。

以上，就实现了一个简易的固定表头固定列横向滚动纵向滚动的表格。

里面的数据没有走真实接口，是模拟的数据，但是接口是真调了，用的豆瓣的api，所以如果发现接口出错，请检查配置项。由于数据是模拟的，所以后边的请求用的都是假数据，用loading来表示走了请求，方便理解。

（1）按字段选择表格需要展示的字段

（2）自定义表头，表头支持时间，input，select，类型的搜索过滤

（3）支持 *** 作选项，可以增删改等

（1）如果是日期范围的话，那个日期框必须的设置的大点，不然就会像效果图一样，选择的日期显示不全，虽然不是大问题，但是应该可以改进吧。其实只要把日期字段那列的宽度设置大点就可以解决这个问题。

（2）关于render函数，这块应该还可以优化，render重新渲染。

github项目地址： https://github.com/Amosyue/hyTable

---