Table 组件构建过程中遇到的问题与解决思路
在 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
组件是一个较为复杂的组件,因为需要考虑到的要素和使用场景过多,在设计组件的同时也要兼顾到哪些属性是否可以作为用户传递,哪一些则不需要让用户自己传递。目前该组件的大致功能已经完成,细节仍在完善。
Table 组件构建过程中遇到的问题与解决思路的更多相关文章
- iOS 学习笔记二【cocopods安装使用和安装过程中遇到的问题及解决办法】【20160725更新】
在osx 10.11之前cocopods问题不多,但是升级到11之后的版本,之前的cocopods大多用不了,需要重新安装,对于我这种使用测试版系统的技术狂来说,每次都需要重新安装很多东西, 当然,c ...
- Visual studio 2015 Community 安装过程中遇到问题的终极解决
早就有给自己电脑升级VS的想法,可是安装过程并不顺利,一直拖到现在,昨天下定决心,把遇到的问题一个个解决,终于安装成功了,将安装过程中遇到的问题和解决方法记录一下. 需要说明一下的是,不同的电脑环境可 ...
- iOS cocopods安装使用和安装过程中遇到的问题及解决办法
在osx 10.11之前cocopods问题不多,但是升级到11之后的版本,之前的cocopods大多用不了,需要重新安装,对于我这种使用测试版系统的技术狂来说,每次都需要重新安装很多东西, 当然,c ...
- 国内不fq安装K8S四: 安装过程中遇到的问题和解决方法
目录 4 安装过程中遇到的问题和解决方法 4.1 常见问题 4.2 常用的操作命令 4.3 比较好的博客 国内不fq安装K8S一: 安装docker 国内不fq安装K8S二: 安装kubernet 国 ...
- 将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法
本博客主要是说一下,,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1.先在阿里云上购买一台阿里云服务器(ECS云服务器): 2.远程连接上该服务器,在 ...
- caffe安装过程中遇到的问题以及解决方法
1. 在安装依赖库的时候,遇到: @gxjun-Latitude-E5440:~$ sudo apt-get install libatlas-base-dev 正在读取软件包列表... 完成 正在分 ...
- 使用javamail发信过程中的一些问题及解决方法
http://www.blogjava.net/TrampEagle/archive/2006/05/26/48326.html 今天在研究javamail发信的过程中,出现了一些小问题,现总结如下, ...
- Tomcat启动过程中找不到JAVA_HOME解决方法
在XP上明明已经安装了JDK1.5并设置好了JAVA_HOME,可偏偏Tomcat在启动过程中找不到. 报错信息如下:Neither the JAVA_HOME nor the JRE_HOME en ...
- 最新cocoapods安装流程,安装过程中遇到的问题及解决方法
最近重新安装了一次cocoapods,参考的安装流程:http://blog.csdn.net/showhilllee/article/details/38398119/ 但是现在的cocoapods ...
随机推荐
- 操作系统的三个接口 shell gui api
操作系统的三个接口 shell gui api 编程语言是用来告诉操作系统干什么的语言. 编程语言是人机交互语言. 程序.进程:任务集.
- 1251. 序列终结者【平衡树-splay】
Description 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这 ...
- virtualbox+vagrant学习-2(command cli)-24-Aliases别名
Aliases 别名的部分灵感来自Git自身的别名功能,它允许你创建自己的定制vagrant命令,从而使你的vagrant体验更简单.更容易.更熟悉. 别名可以在VAGRANT_HOME/ alias ...
- (转)LR性能测试结果样例分析
原文作者:猥琐丶欲为 传送门:http://www.cnblogs.com/hyzhou/archive/2011/11/16/2251316.html 测试结果分析 LoadRunner性能测试结果 ...
- 如何修改sharepoint中alert发送邮件模板
In my post last week I talked about customizing alert notifications and alert templates. Sometimes y ...
- DQL-联合查询
一.含义union:合并.联合,将多次查询结果合并成一个结果二.语法查询语句1union [all]查询语句2union [all]... 三.意义1.将一条比较复杂的查询语句拆分成多条语句2.适用于 ...
- 给button增加下划线
如何给button增加下划线简单版 - (void)setUnderLineForButton:(UIButton *)btn withTitle:(NSString *)title{ //利用富 ...
- Linux下onvi支持h265环境的的搭建:gsoap的安装及生产.c .h文件
1. 下载gsoap :http://www.genivia.com/products.html#notice,既Open Source gSOAP版本,并解压进入目录安装,configure后面 ...
- HO引擎近况20180111
明明想着10号更新了,怎么就忘了呢? 公司的项目又被砍了,几个同事被开,我又转到另外一下组了,难道真的是我到哪哪黄? 快过年了,今年公司年会就在附近,太好了不用想怎么编理由请假事了,还有可能中个奖品, ...
- TI DSP 6657 SRIO 简介
目录 TI DSP 6657 SRIO 简介 SRIO 协议介绍 RapidIO 基础 TI DSP 6657 SRIO 简介 SRIO 协议介绍 TI 的 KeyStone 系列设备中实现了 Rap ...