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 ...
随机推荐
- Spring-IOC 在非 web 环境下优雅关闭容器
当我们设计一个程序时,依赖了Spring容器,然而并不需要spring的web环境时(Spring web环境已经提供了优雅关闭),即程序启动只需要启动Spring ApplicationContex ...
- openstack排除查找错误的两种方法
1.openstack日志一般放在什么什么位置?2.如何调试openstack命令执行过程? 我们会经常错误,但是我们碰到错误该怎么做,该如何找到原因.对于openstack有两种办法:在上一篇文章h ...
- js之点击值发生变化
点击值发生变化,应用场景,比如像阿里云那样我通常密码是以******的形式存在,我必须要点击查看,它才会以明文显示. 在实际开发中,比如以智能门锁为例,安装门锁时,有个叫密码输入框的表单,这个是选填项 ...
- 897. Increasing Order Search Tree
题目来源: https://leetcode.com/problems/increasing-order-search-tree/ 自我感觉难度/真实难度:medium/easy 题意: 分析: 自己 ...
- liunx 安装maven
cd /usr/local mkdir maven cd /usr/local/maven wget https://archive.apache.org/dist/maven/maven-3/3.1 ...
- HDU 1316 (斐波那契数列,大数相加,大数比较大小)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1316 Recall the definition of the Fibonacci numbers: ...
- Delphi在Android下使用Java库
本文将以Android的USB串口通讯库为例,介绍Delphi如何在Android中使用Java的库. USB串口通讯库地址: https://github.com/felHR85/UsbSerial ...
- VS2010调试和头文件路径设置
1:VS2010 release 调试C/C++ -> 常规 -> 调试信息格式, 修改为程序数据库(/Zi)C/C++ ->优化 -> 优化,修改为已禁用(/Od)链接器 - ...
- 洛咕 P3321 [SDOI2015]序列统计
显然dp就是设\(f[i][j]\)表示dp了i轮,对m取膜是j的方案数 \(f[i][xy\mod m]=f[i-1][x]\times f[i-1][y]\) 这是\(O(nm^2)\)的 像我这 ...
- 洛咕 P3964 [TJOI2013]松鼠聚会
有个结论就是把坐标\((x,y)\)变形成\(((x+y)/2,(x-y)/2)\),切比雪夫距离就变成了曼哈顿距离. 所以变换一下坐标直接统计答案即可. // luogu-judger-enable ...