
table 做固定表头的技术难题
- 尝试用css解决,overflow: auto会使整个table滚动,考虑加在tbody上,这就需要知道tbody的height的高度,因此采用js的方法,组件传属性值得知tbody的高度,然后在tbody上加高度设置overflow让其滚动,但发现不会生效,因此改用另一种思路
- 拿出thead,滚动时header始终悬浮在最上面,因此可采用复制table,然后将其theader用绝对定位固定在原有table的thead的位置,复制的tbody的元素则删除掉
- 可以固定表头但发现列不对齐,因此获取原有table的head的每列的高度依次赋值给复制的table的每个th,即可使得复制的theader与原有的列对齐
- 又发现事件不响应了,因为是深拷贝,点击thead上的元素已经不是原来的thead上的了,所以用浅拷贝thead,然后直接往复制的table里面appendChild原有的thead
- 事件可以正常响应但是会发现thead覆盖了第一列,因此设置marginTop,设置在原有的div上不然和用户设置的高度不一样,滚动条问题可以通过用户传宽度或者自制滚动条解决或者设置一个div没有滚动条的,获取其宽度,然后再让其拥有滚动条,在获取宽度,取差值
测试input上传文件的技术难题
- input.files[0] = 'xxx.file', 提示得用filelist
- google 搜索 js set file for input file
-
发现2017年12月前的浏览器不支持,之后支持,stackoverflow 给出了答案
image.png
sticky


使用lib打包

网友评论