【vue && ant design vue】双击行复制该行数据id值

最新推荐文章于 2024-08-22 16:45:00 发布

谭CV

最新推荐文章于 2024-08-22 16:45:00 发布

阅读量881

点赞数 1

分类专栏： ant design vue 文章标签： ant design vue 复制命令添加双击事件

本文链接：https://blog.csdn.net/THcoding_Cat/article/details/113697540

版权

ant design vue 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

1.表格添加自定义行方法

<a-table :customRow="customRow"></a-table>

2.在自定义行方法中定义双击事件

document.execCommand('copy') 调用浏览器复制命令，并返回boolean值

customRow(record){
            return {
                on:{
                    dblclick: (event) => {
                        let input = document.createElement('input');
                        input.value = record.id;
                        document.body.appendChild(input);
                        input.select();
                        let bool = document.execCommand('copy')
                        bool ? this.$message.success('复制该行ID成功') : this.$message.error('复制该行ID失败');
                        document.body.removeChild(input);
                    }
                }
            }
        },