这是一个创建于 1358 天前的主题，其中的信息可能已经有所发展或是发生改变。
在数据密集型应用中 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/ 就行了
|
Select Language