在 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 { width: 0px; }
隐藏轮动条 scrollbar
,但也可以进行滚动。此方法有缺陷,第一是仅适用于 chrome
内核的浏览器;第二是无法使用鼠标指针来拖动 scrollbar
。后来由于宽度是用户自己传递的值,因此也不会再引起轮动条 scrollbar
含有宽度让样式变形的问题table
组件是一个较为复杂的组件,因为需要考虑到的要素和使用场景过多,在设计组件的同时也要兼顾到哪些属性是否可以作为用户传递,哪一些则不需要让用户自己传递。目前该组件的大致功能已经完成,细节仍在完善。
如对本文有疑问, 点击进行留言回复!!
网友评论