Table 组件构建过程中遇到的问题与解决思路

2019-02-17 01:50:30来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

在 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 组件是一个较为复杂的组件,因为需要考虑到的要素和使用场景过多,在设计组件的同时也要兼顾到哪些属性是否可以作为用户传递,哪一些则不需要让用户自己传递。目前该组件的大致功能已经完成,细节仍在完善。


原文链接:https://www.cnblogs.com/evenyao/p/10383410.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue2.5开发去哪儿网App 第二章笔记

下一篇:VUE路由转场特效,WebAPP的前进与后退