自研组件＜十一＞表格，固定表头/列

这个组件相对其他组件看起来比较简单，遇到的坑却是很多。

适应场景：
1、可配置排序
2、可配置列宽度
3、可配置总计及其位置(第一行/最后一行)
4、可配置固定头、固定列
5、单元格可插槽

效果图：

排序

点击排序，是按照NONE->DESC->ASC->NONE的循环顺序排序

插槽

作用域插槽，将单元格数据传递给父组件，父组件在做一个不同的填充
作用域插槽见：《作用域插槽的那些事》

固定头和列

方案一：

用三个表格拼接，三个scroll-view滚动时联动，横向滚动时没有太大问题，竖向滚动时，会出现延迟，裂缝，不能达到一体的效果--->PASS

方案二：

用样式position: sticky, table-head和table-row中的table-column设置

---

---

-----------------------------------------填坑----------------------------------------------------

1、当with不传或with=百分比， 某一列数据很长，会出现border不等

解决：table-head和table-row设置width: fit-content, 因为with不传或with=百分比时，表格是不需产生滚动条，所有列合起来是100%

当with=xxpx时，是可能产生横向滚动条，table-head和table-row设置width: max-content，会根据内容撑开，让scroll-view形成滚动条

2、固定列， 滚动时会发现固定列的底是镂空的，因为第二列的数据很多，它的table-column高度是>第一列的table-column的

解决：table-row flex布局设置align-items: stretch，让同行的table-column等高

效果：

至于单元格内未垂直居中，可在单元格中设置

3、固定列时，横向滚动时可看到最左侧会有一条1px左右的缝隙，会镂空其他数据

解决：固定列用::before伪类填充那条缝隙