🐛[BUG] ProTable 表格内中文复制粘贴出来后文字后面会有一段空格
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
🐛 bug 描述
ProTable 表格内中文鼠标左键连续点击全选中后,复制粘贴出来文字后面会有一段空格
📷 复现步骤
表格内中文,鼠标左键三连击全选中后,ctrl + c 复制,然后ctrl + v 粘贴在 搜索条件中的input输入框里面,文字后面会有一串空格,每次都需要删掉空格后才能再点击搜索
🏞 期望结果
期望只复制出文字,以便于复制粘贴后可以直接搜索
💻 复现代码
© 版本信息
- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息
Hi @zp123914! I'm Dosu and I’m helping the pro-components team.
这个问题已经被社区确认,是 ProTable 及 Table 组件的已知 bug:复制单元格内容(尤其是中文)时,粘贴出来会带有多余的空格,主要和表格单元格的 DOM 结构、Ant Design 的 Typography.Text 包裹、以及浏览器的文本选择行为有关。相关讨论见 pro-components #7704。
目前官方还没有直接修复,根本原因是 ProTable 渲染时会用 genCopyable 包裹文本,生成的 block 级元素(如 Typography.Text)会影响三连击全选时的文本范围,导致多复制了空格或换行[代码参考][genCopyable 实现]。
临时解决方案:
- 在搜索输入框的
onChange事件里用.trim()或.replace(/\s+/g, '')自动去除首尾空格,这样即使复制出来有空格,用户粘贴后也能直接搜索,无需手动删除[相关讨论][更多方案]。 - 如果你自定义了表格渲染,可以尝试避免用 block 级包裹,或用
renderText直接返回字符串,减少 DOM 层级,部分情况下能缓解问题。
这个 bug 受浏览器和操作系统影响较大,不同环境表现可能不同。建议关注上面提到的 issue,后续如有官方修复会第一时间同步。
To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other