在可编辑的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]
}
})
}
}
})
}