Vue实现复制excel表格内容粘贴至el-table

chenghui1126

已于 2023-07-26 09:56:35 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： excel vue.js

于 2023-07-24 14:00:28 首次发布

本文链接：https://blog.csdn.net/chenghui1126/article/details/131894387

文章介绍了如何让用户能够从Excel中复制数据并直接粘贴到el-table中。通过监听paste事件，获取clipboardData中的数据，然后处理文本数据，分割成行，并替换el-table中对应位置的数据。这个方法简化了用户在前端表格中输入数据的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在可编辑的el-table表中输入比较麻烦，用户想从excel中复制数据直接可以粘贴到表中，我刚开始想，这怎么可能嘛，一个是excel表格，一个是代码，这俩咋看也不沾边啊,后面想一想也就是，拿到copy的数据，替换tableData对应的数据，方法如下：

一：监听‘parse’事件：

用户界面发起“粘贴”动作时，将触发 paste 事件

const target = document.querySelector('.target-table')

target.addEventListener('paste', (event) => {}）

二：获取copy的数据

event.preventDefault()

let paste = (event.clipboardData || window.clipboardData).getData('text')

三：根据业务需要处理copy的数据，替换掉el-talbe中对应位置的数据

以下代码中数据处理的比较简单。大致思路差不多了

const pasteExeclData = () => {
    document.addEventListener('paste', (event) => {
        event.preventDefault()
        let paste = (event.clipboardData || window.clipboardData).getData(
            'text'
        )
        let rows = paste.split('\r\n')
        for (let i = 0; i < rows.length; i++) {
            if (rows[i]) {
                tableData.value.forEach((item, index) => {
                    if (index === i) {
                        item[pasteHead.value] = rows[i]
                    }
                })
            }
        }
    })
}