先上一波效果圖
以下是做這個功能的由來（覺得無聊的直接去看代碼，捂臉）
老大讓我做一個從excel復制選中的內容，然后在el-table里面黏貼，從而實作資料的批量匯入到后臺管理系統中，這樣就不用一個一個輸入了，我剛開始想，這怎么可能嘛，一個是excel表格，一個是代碼，這
倆咋看也不沾邊啊，然后老大給我說，這種功能是有的，你去網上隨便一搜，很多教程的，那個clipboard插件好像就可以，然后我去搜了，發現不是那樣，草（是一種植物），那個clipboard的復制，說到底也是給要復制的地方加個事件觸發，然后復制，但是 你能在excel表格上面加點擊事件嗎？？所以說，這個行不通，又百度了個說是使用jquery插件的，我覺得太麻煩了，而且也不一定行得通，最后說是用handsontable插件的，但是我裝了后，發現沒啥作用，就又去想了會，這他喵不就是復制黏貼嗎，那我直接獲取excel表格復制過來的內容，然后對獲取到的內容進行處理一下，最后再插入到el-table里面不就行了，然后去百度到了一個事件 paste，對滑鼠的復制黏貼事件進行監控，最后又借鑒了幾個大佬的博客，也是對paste事件進行監聽
mdn上面有對paste進行了介紹，還不錯 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/paste_event
看了大佬的博客，我是豁然開朗啊，這是博客地址https://blog.csdn.net/zhaozhao236/article/details/115327739
沒有使用什么插件啥的，就幾行原生js代碼就實作了
代碼入下：
<template>
<div class="book">
<el-input type="text" v-model="paster" @paste.native="pasteMe" />
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="age" label="年齡" width="80"> </el-table-column>
<el-table-column prop="sex" label="性別" width="80"> </el-table-column>
<el-table-column prop="education" label="學歷" width="120"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
paster: "",
tableData: [
{
name: "趙老二",
age: "28",
sex: "男",
education:"本科"
},
{
name: "錢多多",
age: "25",
sex: "女",
education: "研究生",
},
{
name: "孫不客",
age: "21",
sex: "男",
education: "教授",
},
{
name: "李自成",
age: "27",
sex: "男",
education: "院長",
},
],
};
},
methods: {
pasteMe(e) {
let source = e.clipboardData.getData("Text");
// console.log(source);
// 首先對源頭進行決議
let rows = source.split("\n"); // 拆成很多行
// console.log(rows);
for (let i = 0; i < rows.length; i++) {
// console.log(rows[i])
if (rows[i] != "") {
// 如果某一行不是空，再按列拆分
let columns = rows[i].split("\t"); // 已經按列劃分
// console.log(columns);
let dataone = {}; // 宣告一行陣列
for (let j = 0; j < columns.length; j++) {
// 讀取tableData里的第j對應的key值
let keys = Object.keys(this.tableData[j]); // key的名
dataone[keys[j]] = columns[j];
}
// console.log(dataone);
this.tableData.push(dataone);
console.log(this.tableData);
}
}
},
},
};
</script>
<style>
.book {
width: 50%;
height: 400px;
border: 1px solid red;
margin: 0 auto;
margin-top: 50px;
overflow-y: scroll;
}
.el-input__inner {
height: 100px !important;
}
</style>
ps: csdn（床上等你）上面傳不了excel表格，所以看個截圖吧
\t是制表符，\r是換行，\n是回車
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/347155.html
標籤：其他