在数据密集型应用中 Table 是最常使用的数据容器之一。之前我一直使用 Ant Design 自带的 Table, 但后来有了个需求,用户要能够自定义 Table 的列, 包括是否显示某一列以及该列的优先级。
刚开始是尝试直接拖拽列头,奈何功能实现了,体验却是不尽人意
比如以下表格
姓名 年龄 性别 地址
Joe Doe 23 Male 5th Avenue, NY
要把地址拖拽到第二列, 需要先将年龄和性别向右移动一个单位为地址腾出地方
这里的"一个单位"是相对的,指的是一列,但这个绝对列长又不容易获取
而且这种拖拽不是瞬间完成的,在选择目的地的时候容易晃动,晃动造成的不确定性让用户感觉自己"没有控制权"
最后,拖拽过程中只有列头在移动,该列数据还在原来的位置,只有在拖拽完成后瞬间被移动过来。这破坏了列头和该列数据之间的一体性
后来干脆放弃这种方案, 直接采用 Modal 来专门处理这个问题,借助 react-beautiful-dnd 搞成了类似 Jira 里面任务泳道的形式
1
lxzxl 2021-04-09 09:25:01 +08:00 via iPhone
他们的 pro table 有这些增强功能
|
2
LiuJiang 2021-04-09 09:25:51 +08:00 8
你这个组件底层逻辑是什么?顶层设计在哪里?最终交付价值是什么?过程的抓手在哪里?如何保证结果的闭环?能否赋能产品生态?这个组件比其他组件的亮点在哪?优势在哪?我没有看到你的沉淀和思考,你有形成自己的方法论吗?你得让别人清楚,凭什么换这个工具,是不是换下一个工具也可以?
|
3
finnlewis 2021-04-09 09:29:31 +08:00 via iPhone
老哥这加班时间有点晚啊
|
4
fengche361 2021-04-09 09:38:51 +08:00
@LiuJiang 哈哈哈哈,一看就是大牛
|
5
yangheng4922 2021-04-09 09:55:29 +08:00
好家伙 一下 10 连问 哈哈
|
6
Orangeee 2021-04-09 09:56:43 +08:00
|
7
Orangeee 2021-04-09 09:58:05 +08:00
上面是我们的一个实现,感觉交互上会合理点,右上角可以点击激活列的显示隐藏和拖拽排序。
|
9
vision1900 OP @lxzxl 我去看看
|
11
vision1900 OP @LiuJiang 这些名词我都得查一下 :) 这里主要是提供交互和实现的一个思路. 使用 Typescript 提供了和 Antd 一致的完整类型定义,Props 和 Antd 里的 Table 完全一致. 对于之前就用 Antd Table 的开发者来说没有任何学习成本. 大佬可能站的比较高,我现在还是仅仅站在实现功能,好用的角度上来做开发
|
12
vision1900 OP @Orangeee 嗯嗯,感觉这样视觉上的侵入感会更低,也不用新开 Modal
|
13
catcn 2021-04-09 10:48:37 +08:00
@vision1900 感觉就是 ali 的开发(人生)提问样式,哈哈哈
|
14
vision1900 OP @finnlewis 刚刚离职,晚上 8 点就睡,凌晨起来写简历,顺便维护一下之前的小项目.
|
15
catcn 2021-04-09 10:53:10 +08:00
看了一下这个隐藏列的小组件,要是我来搞,估计会搞到表头列头里边的,因为那一个配置按钮太突兀了。最近也在搞 ant design,感觉要花蛮多时间才能搞定。
|
16
vision1900 OP @catcn 可以看下 6 楼老哥的分享,我也这么觉得,哈哈
|
17
nbhaohao 2021-04-09 11:45:36 +08:00
挺认同这个思路的。
如果强行在 Table 做按住表头然后拖拽排序的逻辑,代码应该会非常不好实现,而且会出现边界情况。另一方面用起来可能体验也不太好。 楼主这个,估计可能还要考虑 fixed 列那种,就可能 disabled 或者其他的处理。 另外 demo 现在 ok 和 cancel 是直接把模态框干掉了吗?体验不太好,失去了 close 的动画效果,不知道是不是因为只是 demo 。如果是为了清空数据或者其他之类的,应该有更好的做法。 |
18
dany813 2021-04-09 13:02:41 +08:00
6 楼的看着更加舒服一点
|
19
lanyulei 2021-04-09 13:41:09 +08:00
👍赞
|
21
afc163 2021-05-16 23:11:36 +08:00
这个需求直接用 ProTable https://procomponents.ant.design/components/table/ 就行了
|