vue实现复制excel内容粘贴到el-table中
需求
从 excel 复制选中的内容,然后在 el-table 里面粘贴,从而实现数据的批量导入到后台管理系统中,这样就不用一个一个输入了。
原理
因为现在的谷歌等浏览器从安全等角度考虑,禁止直接读取剪切板上的东西。所以要手动的实现粘贴的这一步,通过粘贴到 text 文档上,然后,使用 for 遍历,根据 \n
把每一行分开,然后再根据\t
把每一列的数据都提取出出来,对应着存入到表格中。
没有使用什么插件啥的,就几行原生 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>
\t
是制表符,\r
是换行,\n
是回车
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue实现复制excel内容粘贴到el-table中
码云笔记 » vue实现复制excel内容粘贴到el-table中