AntDesignPro: 在ProTable Columns中自定义Copy的内容

详情

在ProTable Columns中copyable的属性设置为true时，会生成一个复制的图标，点击即可复制。

{
    title: '标题',
    dataIndex: 'title',
    copyable: true,
    ellipsis: true,
    tip: '标题过长会自动收缩',
  },

如下API文档可以看到，copyable的值只能是boolean类型
https://procomponents.ant.design/components/table/#columns-%E5%88%97%E5%AE%9A%E4%B9%89
​

即无法指定复制的内容，而对于数组类型的数据，就无法任意DIY了：
​

例如我想在点击copy时，复制用户数组里面每个用户的邮箱，并且用逗号分隔
​

找文档

在AntDesign的组件文档中搜索copyable关键字时，找到下面一处资料[

https://ant.design/components/typography-cn/#Typography.Text

copyable参数: 是否可拷贝，为对象时可进行各种自定义，支持bollean类型的参数和Copyable类型的参数

Copyable对象接受的属性值如下所示
https://ant.design/components/typography-cn/#copyable

{
  #拷贝到剪切板里的文本
  text: string, 
    
  #拷贝成功的回调函数
  onCopy: function,
   
  #自定义拷贝图标：[默认图标, 拷贝后的图标]
  icon: ReactNode, 
    
  自定义提示文案，为 false 时隐藏文案
  tooltips: false | [ReactNode, ReactNode],
}

示例如下

<Text copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Text>

去源码中查看ProTable中的实现

pro-components项目
packages/utils/src/genCopyable/index.tsx:21
可以看到在ProTable的Columns中的复制操作实际调用的是Text组件

在ProTable Columns中自定义Copy的内容

因为我们可以通过手动增加一个Text标签，替换官方通过copyable=true自动增加一个Text标签的方式，来自定义Copy的内容。
​

示例如下：

  {
    title: '负责人',
    dataIndex: ['node', 'extension', 'owner'],
    render: (text, record, index) => (
      text instanceof Array
        ? (<Space>
            {text.map((owner) => (<a>{owner.name}</a>))}
            <Text copyable={{ text: text.map(owner => owner.email).join(',') }}></Text>
          </Space>)
        : (<>{text}</>)
    )
  },

效果如下，点击复制按钮时，会复制张斌、陈丹、王强的邮箱地址到剪切板