【通用组件】高效生成 antd Table 组件的操作列每次定义 Table 的操作列时，都要写一大堆重复的“模板代码”

源码

背景

业务中台重构后，新的框架基于 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 效果，影响用户体验

需求分析

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

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

核心组件

ButtonExt

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

PopconfirmBtn

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

DropdownBtn

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

TableOption

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