产品原型中要将表格中的selection列和index列合并成一个列里面展示,如下图所示:
并要求
- 保留表头的全选。
- 不能影响表格组件check的触发。
- 翻页之后索引重新从1开始。
我尝试自己去自定义这样的结构,发现还是影响到了表格check相关时间的触发,于是无奈放弃,随后我翻遍了elementui表格组件的api详解也没有找到合适的解决方案,正当我束手无策之时,我去上了一趟厕所,此时灵光一闪,茅塞顿开, 为何不能尝试用css去曲线救国呢?
尿罢,即返工位,手起置于键盘之上,健码如飞后,终大功告成。
思路:如果在如图:
处用slot来自定义,那么必将会引起checkbox的消失,由于该复选框一般会出现在表格的首列,如果用一个css类名去给该列添加一个::before盒子,盒子内容是索引值,如此的话他就不会影响到正常的check事件,那么这个问题就迎刃而解。
要用到的东西:
- elementui table 的 row-style 属性
- css计数器:counter-reset,(点击查阅) 各主流浏览器都已支持该属性。
在这之前必须先在 table 中设置自定义属性(如图):
随后即可设置下面的核心代码(废话说了那么多也就用几行就解决了)。
大家可以f12观察其dom结构:
总结
前端写到最后,发现最难的还是css!!!