【通用组件】高效生成 antd Table 组件的操作列

源码

TableOption 组件源码

背景

业务中台重构后，新的框架基于 antd 整套生态，采用声明式的设计思路，可以通过 JSON 的方式快速构建 CRUD 页面的查询表单、Table 表格、新增编辑表单

但每次定义 Table 的操作列时，都要写一大堆重复的“模板代码”，一来效率低，二来不便于通过交互细节，故对这个场景进行抽象封装，整理成一个通过组件

如上图，没有封装组件之前，每次都要重复写以下类似的“模板代码”：

{
  title: '操作',
  render: (text, record, index) => {
    const tableMoreBtns = (
      <Menu>
        <Menu.Item>
          <Button type="text" size="small">xxx111</Button>
        </Menu.Item>
        <Menu.Item>
          <Button type="text" size="small">xxx222</Button>
        </Menu.Item>
        <Menu.Item>
          <Button type="text" size="small">xxx333</Button>
        </Menu.Item>
      </Menu>
    );

    return (
      <Space size={0} split={<Divider type="vertical" />} wrap>
        <Button type="link" size="small">xxx</Button>
        <Button type="link" size="small">记录</Button>

        <Dropdown overlay={tableMoreBtns}>
          <Button type="link" size="small">
            更多
            <DownOutlined />
          </Button>
        </Dropdown>
      </Space>
    );
  },
},
复制代码

而且另外一个比较大的问题是交互不统一，比如，上面点击“记录”按钮，需要先请求后端详情接口，然后再打开编辑弹框，这时很容易忘记加 loading 效果，影响用户体验

需求分析

基于目前的业务场景，对于这个通过组件，归纳一下几点需求：

1. 操作列只放三种类型的按钮：普通 text button 、二次确认 Popconfirm 按钮、下拉菜单 button
2. 自动管理按钮的 loading 效果，若声明了对应的异步函数，自动出 loading 效果
3. 对于，Popconfirm 按钮，如果有异步操作，不在确认按钮的地方开 loading，而是直接在对应 button 的位置开 loading
4. 对于，下拉菜单 button，如果有异步操作，要等 loading 完再关闭下拉菜单
5. 预留鉴权的接口，通过权限控制按钮的显示与否

核心组件

ButtonExt

对 antd 的按钮进行扩展，增加 onAsyncClick 回调函数，如果使用该函数，并且有异步操作的话，按钮自动管理 loading 效果的开或关

PopconfirmBtn

组合 Popconfirm 和 Button 两个组件，定义配置项，实现 JSON 生成需要二次确认的按钮的效果

DropdownBtn

组合 Dropdown 和 Button 两个组件，定义配置项，实现 JSON 生成下拉菜单的按钮

TableOption

自定义操作列按钮，整理上面几种类型的按钮，通过 JSON 声明式生成对应组件