V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vision1900
V2EX  ›  React

分享一个基于 Ant Design Table 的小组件

  •  
  •   vision1900 · 2021-04-09 02:31:12 +08:00 · 3401 次点击
    这是一个创建于 1306 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在数据密集型应用中 Table 是最常使用的数据容器之一。之前我一直使用 Ant Design 自带的 Table, 但后来有了个需求,用户要能够自定义 Table 的列, 包括是否显示某一列以及该列的优先级。

    刚开始是尝试直接拖拽列头,奈何功能实现了,体验却是不尽人意

    比如以下表格

    姓名     年龄  性别  地址
    Joe Doe  23   Male  5th Avenue, NY
    

    要把地址拖拽到第二列, 需要先将年龄和性别向右移动一个单位为地址腾出地方

    这里的"一个单位"是相对的,指的是一列,但这个绝对列长又不容易获取

    而且这种拖拽不是瞬间完成的,在选择目的地的时候容易晃动,晃动造成的不确定性让用户感觉自己"没有控制权"

    最后,拖拽过程中只有列头在移动,该列数据还在原来的位置,只有在拖拽完成后瞬间被移动过来。这破坏了列头和该列数据之间的一体性

    后来干脆放弃这种方案, 直接采用 Modal 来专门处理这个问题,借助 react-beautiful-dnd 搞成了类似 Jira 里面任务泳道的形式

    这是 Demo: http://widgets.realrz.com/ant-table-dnd

    代码在这里: https://github.com/librz/ant-table-dnd

    21 条回复    2021-05-16 23:11:36 +08:00
    lxzxl
        1
    lxzxl  
       2021-04-09 09:25:01 +08:00 via iPhone
    他们的 pro table 有这些增强功能
    LiuJiang
        2
    LiuJiang  
       2021-04-09 09:25:51 +08:00   ❤️ 8
    你这个组件底层逻辑是什么?顶层设计在哪里?最终交付价值是什么?过程的抓手在哪里?如何保证结果的闭环?能否赋能产品生态?这个组件比其他组件的亮点在哪?优势在哪?我没有看到你的沉淀和思考,你有形成自己的方法论吗?你得让别人清楚,凭什么换这个工具,是不是换下一个工具也可以?
    finnlewis
        3
    finnlewis  
       2021-04-09 09:29:31 +08:00 via iPhone
    老哥这加班时间有点晚啊
    fengche361
        4
    fengche361  
       2021-04-09 09:38:51 +08:00
    @LiuJiang 哈哈哈哈,一看就是大牛
    yangheng4922
        5
    yangheng4922  
       2021-04-09 09:55:29 +08:00
    好家伙 一下 10 连问 哈哈
    Orangeee
        7
    Orangeee  
       2021-04-09 09:58:05 +08:00
    上面是我们的一个实现,感觉交互上会合理点,右上角可以点击激活列的显示隐藏和拖拽排序。
    AlexWIT
        8
    AlexWIT  
       2021-04-09 10:12:48 +08:00
    @LiuJiang 好家伙,血压瞬间拉满
    vision1900
        9
    vision1900  
    OP
       2021-04-09 10:37:56 +08:00
    @lxzxl 我去看看
    guili618
        10
    guili618  
       2021-04-09 10:43:38 +08:00
    @LiuJiang 哈哈 我血压顿时上来 自闭了 😂😂😂
    vision1900
        11
    vision1900  
    OP
       2021-04-09 10:47:13 +08:00
    @LiuJiang 这些名词我都得查一下 :) 这里主要是提供交互和实现的一个思路. 使用 Typescript 提供了和 Antd 一致的完整类型定义,Props 和 Antd 里的 Table 完全一致. 对于之前就用 Antd Table 的开发者来说没有任何学习成本. 大佬可能站的比较高,我现在还是仅仅站在实现功能,好用的角度上来做开发
    vision1900
        12
    vision1900  
    OP
       2021-04-09 10:48:16 +08:00
    @Orangeee 嗯嗯,感觉这样视觉上的侵入感会更低,也不用新开 Modal
    catcn
        13
    catcn  
       2021-04-09 10:48:37 +08:00
    @vision1900 感觉就是 ali 的开发(人生)提问样式,哈哈哈
    vision1900
        14
    vision1900  
    OP
       2021-04-09 10:49:49 +08:00
    @finnlewis 刚刚离职,晚上 8 点就睡,凌晨起来写简历,顺便维护一下之前的小项目.
    catcn
        15
    catcn  
       2021-04-09 10:53:10 +08:00
    看了一下这个隐藏列的小组件,要是我来搞,估计会搞到表头列头里边的,因为那一个配置按钮太突兀了。最近也在搞 ant design,感觉要花蛮多时间才能搞定。
    vision1900
        16
    vision1900  
    OP
       2021-04-09 10:55:19 +08:00
    @catcn 可以看下 6 楼老哥的分享,我也这么觉得,哈哈
    nbhaohao
        17
    nbhaohao  
       2021-04-09 11:45:36 +08:00
    挺认同这个思路的。
    如果强行在 Table 做按住表头然后拖拽排序的逻辑,代码应该会非常不好实现,而且会出现边界情况。另一方面用起来可能体验也不太好。

    楼主这个,估计可能还要考虑 fixed 列那种,就可能 disabled 或者其他的处理。

    另外 demo 现在 ok 和 cancel 是直接把模态框干掉了吗?体验不太好,失去了 close 的动画效果,不知道是不是因为只是 demo 。如果是为了清空数据或者其他之类的,应该有更好的做法。
    dany813
        18
    dany813  
       2021-04-09 13:02:41 +08:00
    6 楼的看着更加舒服一点
    lanyulei
        19
    lanyulei  
       2021-04-09 13:41:09 +08:00
    👍赞
    yph007595
        20
    yph007595  
       2021-04-09 17:00:06 +08:00
    @LiuJiang 阿里大牛
    afc163
        21
    afc163  
       2021-05-16 23:11:36 +08:00
    这个需求直接用 ProTable https://procomponents.ant.design/components/table/ 就行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5423 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:57 · PVG 14:57 · LAX 22:57 · JFK 01:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.