Table 组件构建过程中遇到的问题与解决思路
2024-09-28 09:32:40
在 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
组件是一个较为复杂的组件,因为需要考虑到的要素和使用场景过多,在设计组件的同时也要兼顾到哪些属性是否可以作为用户传递,哪一些则不需要让用户自己传递。目前该组件的大致功能已经完成,细节仍在完善。
最新文章
- ajax请求成功后新窗口window.open()被拦截的解决方法
- 第十篇.bootstrap轮播
- log4j2 配置文件
- java: cairo-misc.c:380: _cairo_operator_bounded_by_source: Assertion `NOT_REACHED' failed.
- PHP的serialize序列化数据与JSON格式化数据
- axure 母版 模板
- jmeter随笔(7)--查看请求响应,为空
- http报文在网络中是明文传输的,所以不安全。HTtp必然来临
- C#学习笔记(四):委托和事件
- ubuntu12.10设置禁止锁屏和屏幕常亮
- SGU 114.Telecasting station
- 初识Activity
- C++中explicit
- Python基本知识
- Log4j使用详解
- cas单点登录
- 简单使用redis实现sso单点登录
- Android 8 蓝牙打开过程
- js-ES6学习笔记-const命令
- Confluence 6 可以自定义的元素