我收到的需求是查询条件以表格的形式展示,同时要支持从excel粘贴
该文件为vue文件,基本静态部分如下
<template>
<div>
<table style="margin-bottom: 20px">
<tr>
<td>GlassId</td>
<td>X坐标</td>
<td>Y坐标</td>
</tr>
<tr v-for="(item, index) in searchList" :key="index">
<td>
<input type="text" title="glassId" v-model="item.glassId" />
</td>
<td>
<input type="text" title="X坐标" v-model="item.x" />
</td>
<td>
<input type="text" title="Y坐标" v-model="item.y" />
</td>
</tr>
</table>
</div>
</template>
<script>
const searchList = [];
for (let i = 0; i < 10; i++) {
searchList.push({ glassId: "", x: "", y: "" });
}
export default {
data() {
return {
searchList
};
}
};
</script>
<style scoped>
table,
td {
border: 1px solid #333;
border-collapse: collapse;
}
td {
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
}
td > input {
width: 100%;
height: 100%;
border: 0;
padding: 0 10px;
}
</style>
首先建立一个静态的table表格,每个td下都填满一个input框,方便v-model双向绑定数据(原本是用的div并给定可编辑的属性,后来发现和数据绑定比较麻烦,后决定用input)
该需求主要的技术点在于js里的粘贴事件 paste,代码如下
document.addEventListener("paste", e => {
e.preventDefault(); //阻止默认粘贴事件
e.stopPropagation(); //阻止事件冒泡
let paste = (e.clipboardData || window.clipboardData).getData("text"); //以text方式接收粘贴内容
...
})
声明粘贴事件后,首先要阻止默认的粘贴事件,不让内容粘贴到表格中 ,然后接收粘贴出来的数据
以上为excel原数据和控制台打印的paste,每各单元格之间由 \t 间隔开,行与行之间由 \r\n 间隔开,由于控制台的缘故,字符串的这些未作显示。
然后对接收到的paste字符串做处理,先按行分隔成数组
document.addEventListener("paste", e => {
e.preventDefault(); //阻止默认粘贴事件
e.stopPropagation(); //阻止事件冒泡
let paste = (e.clipboardData || window.clipboardData).getData("text"); //以text方式接收粘贴内容
let arr &#