在 GearCase 开源项目构建 Table 组件的过程中。遇到了各式各样的问题，最后尝试了各种方法去解决这些问题。
遇到的部分问题
checkbox的全选和半选问题table组件的排序请求方法table组件固定表头问题- 固定表头时宽度计算的问题
- 点击
icon排序事件无法触发的问题 - 轮动条
scrollbar含有宽度让样式变形的问题
解决思路
- 使用
watch监听选中项，与原始数据进行对比，修改indeterminate的值来显示checkbox的全选/半选/不选状态 - 使用点击
icon图标来触发排序事件，排序事件为一个ajax请求，相当于重新请求后端发过来的排序后的新数据，进行渲染即可 - 固定表头一开始的思路是使用
css来固定table中的thead，达到固定表头的作用，过程中发现使用单纯的css有诸多阻碍，放弃该种思路。转而使用JS + css的方式。 拷贝一个相同的thead DOM节点并绝对定位的最上方表头。 - 由于
thead已经不再是以前table组件自身的thead，而是通过拷贝节点复制得到的，因此没有事件。使用let table2 = this.$refs.table.cloneNode(false)进行克隆，并使用table2.appendChild(thead)重新修改组件自身的thead，这样就相当于重新拥有的事件。 - 由于表头固定时的节点是拷贝出来的，因此宽度和原表头不相同，一开始使用实时计算宽度的方式，后来考虑到性能和复杂度的问题，去除了实时更新计算宽度。改成用户自己传宽度值属性的方式。
- 一开始由于宽度是通过实时计算得到的，会引起轮动条
scrollbar含有宽度让table组件内部宽度无法和固定表头对齐的问题。一开始使用::-webkit-scrollbar { 0px; }隐藏轮动条scrollbar，但也可以进行滚动。此方法有缺陷，第一是仅适用于Chrome内核的浏览器；第二是无法使用鼠标指针来拖动scrollbar。后来由于宽度是用户自己传递的值，因此也不会再引起轮动条scrollbar含有宽度让样式变形的问题
其他
Table 组件是一个较为复杂的组件，因为需要考虑到的要素和使用场景过多，在设计组件的同时也要兼顾到哪些属性是否可以作为用户传递，哪一些则不需要让用户自己传递。目前该组件的大致功能已经完成，细节仍在完善。