造轮子遇到的的技术难题

image.png

table 做固定表头的技术难题

1. 尝试用css解决，overflow: auto会使整个table滚动，考虑加在tbody上，这就需要知道tbody的height的高度，因此采用js的方法，组件传属性值得知tbody的高度，然后在tbody上加高度设置overflow让其滚动，但发现不会生效，因此改用另一种思路
2. 拿出thead，滚动时header始终悬浮在最上面，因此可采用复制table，然后将其theader用绝对定位固定在原有table的thead的位置，复制的tbody的元素则删除掉
3. 可以固定表头但发现列不对齐，因此获取原有table的head的每列的高度依次赋值给复制的table的每个th，即可使得复制的theader与原有的列对齐
4. 又发现事件不响应了，因为是深拷贝，点击thead上的元素已经不是原来的thead上的了，所以用浅拷贝thead，然后直接往复制的table里面appendChild原有的thead
5. 事件可以正常响应但是会发现thead覆盖了第一列，因此设置marginTop，设置在原有的div上不然和用户设置的高度不一样，滚动条问题可以通过用户传宽度或者自制滚动条解决或者设置一个div没有滚动条的,获取其宽度,然后再让其拥有滚动条,在获取宽度,取差值

测试input上传文件的技术难题

1. input.files[0] = 'xxx.file', 提示得用filelist
2. google 搜索 js set file for input file

3. 发现2017年12月前的浏览器不支持，之后支持，stackoverflow 给出了答案

   
   
   image.png

sticky

image.png

image.png

使用lib打包

image.png