vue实现excel表格复制粘贴
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue表格复制粘贴
效果图：
说明：想要实现从excel表格复制内容之后，在vue页面上粘贴。有两个情况：
（1）全部列都可以粘贴：无论从哪一列点击开始粘贴，都是从点击的列开始粘贴。效果如上图1
（2）只有指定几列可以粘贴：点击哪一列开始粘贴，从此列开始粘贴，如果点击的列不是可以粘贴的列，那么也是从可以粘贴的列开始粘贴（只能点击可以粘贴列的前面列才可以粘贴，点击后面列不能粘贴）效果如上图2
注意：如果多列需要粘贴，那么这些列必须是相邻列。比如：columns=[name,key,age],那么不能只粘贴{name,age},中间不能有跳过的列。
实现过程：
1、普通–全部列都可以粘贴
（1）html
<Table border :data="tableData" :columns="columns" size="normal" @paste.native="pasteInfo($event)" @on-cell-click="showDetail"></Table>
（2）data
data(){
return{
currentRowIndex: undefined,
currentColumnIndex: undefined,
currentColumnKey: undefined,
rowsInfo:[],
emptyObj: { //全部列都可以粘贴
name:undefined,
age:undefined,
bir:undefined,
asg:undefined,
},
tableData:[
{
name:'xzz',
age:'18',
bir:'xs',
asg:'8888'
},
{
name:'xzz',
age:'18',
bir:'xs',
asg:'8888'
},
{
name:'xzz',
age:'18',
bir:'xs',
asg:'8888'
}
],
columns:[
{
key:'name',
align:'center'
},
{
key:'age',
align:'center'
},
{
key:'bir',
align:'center'
},
{
key:'asg',
align:'center'
}
],
}
}
（3）methods
pasteInfo(e) {
try {
var data = null;
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
//复制过来的内容
data = clipboardData.getData("Text");
console.log(data)
//首先对源头进行解析
var rowStrArray = data.split("\n");//拆成很多行
console.log(rowStrArray,'rowStrArray')
this.rowsInfo = [];
for (var i = 0; i < rowStrArray.length-1; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split("\t");//按列拆分
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j]);
}
this.rowsInfo.push(row);
}
console.log(this.rowsInfo,'rowInfo')
for (var j = 0; j < this.rowsInfo.length; j++) {
console.log(this.currentRowIndex,'this.currentRowIndex')
if(this.currentRowIndex+j > this.tableData.length - 1){
break
}
this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))
console.log(this.temp,'temp')
let num = 0
let numFlag = 0 //从哪一列开始粘贴：全部列都可以粘贴(即从第0列可以粘贴)
for (var key in this.emptyObj) {
if (!this.rowsInfo[j][num]) {
break
}
if (this.currentColumnIndex <= numFlag) {
this.temp[key] = this.rowsInfo[j][num]
num = num + 1
}
numFlag = numFlag + 1
}
this.$set(this.tableData, this.currentRowIndex+j, this.temp)
}
// this.$emit('update:tableData', this.tableData)
this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))
} catch(err) {
this.$Message.error({
content: '请选择复制位置'
})
}
},
showDetail(row, column, data, event){
console.log(row,column)
this.currentRowIndex = row._index
this.currentColumnIndex = column._index
this.currentColumnKey = column.key
},
2、如果只粘贴其中两列
emptyObj: {//只粘两个字段(即只粘贴两列)bir列开始粘贴，bir是第二列
bir:undefined,
asg:undefined,
},
methods
//复制粘贴事件
pasteInfo(e) {
try {
var data = null;
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
//复制过来的内容
data = clipboardData.getData("Text");
console.log(data)
//首先对源头进行解析
var rowStrArray = data.split("\n");//拆成很多行
console.log(rowStrArray,'rowStrArray')
this.rowsInfo = [];
for (var i = 0; i < rowStrArray.length-1; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split("\t");//按列拆分
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j]);
}
this.rowsInfo.push(row);
}
console.log(this.rowsInfo,'rowInfo')
for (var j = 0; j < this.rowsInfo.length; j++) {
console.log(this.currentRowIndex,'this.currentRowIndex')
if(this.currentRowIndex+j > this.tableData.length - 1){
break
}
this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))
console.log(this.temp,'temp')
let num = 0
let numFlag = 2 //限制从第几列开始粘贴（从key=bir列开始粘贴，bir是第二列所有=2）
for (var key in this.emptyObj) {
if (!this.rowsInfo[j][num]) {
break
}
if (this.currentColumnIndex <= numFlag) {
this.temp[key] = this.rowsInfo[j][num]
num = num + 1
}
numFlag = numFlag + 1
}
this.$set(this.tableData, this.currentRowIndex+j, this.temp)
}
// this.$emit('update:tableData', this.tableData)
this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))
} catch(err) {
this.$Message.error({
content: '请选择复制位置'
})
}
},
showDetail(row, column, data, event){
console.log(row,column)
this.currentRowIndex = row._index
this.currentColumnIndex = column._index
this.currentColumnKey = column.key
},
3、如果只粘贴其中一列
emptyObj: {//只粘一个字段(age是第一列，即从第一列开始粘贴)
age:undefined
},
pasteInfo(e) {
try {
var data = null;
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
//复制过来的内容
data = clipboardData.getData("Text");
console.log(data)
//首先对源头进行解析
var rowStrArray = data.split("\n");//拆成很多行
console.log(rowStrArray,'rowStrArray')
this.rowsInfo = [];
for (var i = 0; i < rowStrArray.length-1; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split("\t");//按列拆分
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j]);
}
this.rowsInfo.push(row);
}
console.log(this.rowsInfo,'rowInfo')
for (var j = 0; j < this.rowsInfo.length; j++) {
console.log(this.currentRowIndex,'this.currentRowIndex')
if(this.currentRowIndex+j > this.tableData.length - 1){
break
}
this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))
console.log(this.temp,'temp')
let num = 0
let numFlag = 1 //从第一列开始粘贴
for (var key in this.emptyObj) {
if (!this.rowsInfo[j][num]) {
break
}
if (this.currentColumnIndex <= numFlag) {
this.temp[key] = this.rowsInfo[j][num]
num = num + 1
}
numFlag = numFlag + 1
}
this.$set(this.tableData, this.currentRowIndex+j, this.temp)
}
// this.$emit('update:tableData', this.tableData)
this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))
} catch(err) {
this.$Message.error({
content: '请选择复制位置'
})
}
},
showDetail(row, column, data, event){
console.log(row,column)
this.currentRowIndex = row._index
this.currentColumnIndex = column._index
this.currentColumnKey = column.key
},
-----------------------------------------------扩展----------------------------------------------
以上是普通的粘贴，如果遇到在粘贴的过程中需要对粘贴的内容进行修改，比如：select 选择框对应的字典值就经常遇到，不能只显示字典code码，需要转换为对应的汉字。
pasteInfo(e) {
try {
//获得粘贴的文字
var data = null;
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
data = clipboardData.getData("Text");
var rowStrArray = data.split("\n");
this.rowsInfo = [];
for (var i = 0; i < rowStrArray.length-1; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split("\t");
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j].replace("\r",""));
}
this.rowsInfo.push(row);
}
for (var j = 0; j < this.rowsInfo.length; j++) {
if(this.currentRowIndex+j > this.tableData.length - 1){
break
}
if(this.tableData[this.currentRowIndex+j].controlPoint === 'aaa' || this.tableData[this.currentRowIndex+j].controlPoint === 'sss' ){
continue
}
this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))
let num = 0
let numFlag = 2
for (var key in this.emptyObj) {
if (!this.rowsInfo[j][num]) {
break
}
if (this.currentColumnIndex-1 <= numFlag) {
this.temp[key] = this.rowsInfo[j][num]
//key == 'complianceDesc'时，对值在这里进行修改
if (key == 'complianceDesc') {
this.temp['compliance'] = this.getKey(this.rowsInfo[j][num])
}
if (this.temp.cellClassName && this.temp.cellClassName[key]) {
delete this.temp.cellClassName[key]
}
num = num + 1
}
numFlag = numFlag + 1
}
this.$set(this.tableData, this.currentRowIndex+j, this.temp)
}
this.$emit('update:tableData', this.tableData)
this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))
}
catch(err) {
this.$Message.error({
content: '请选择复制位置'
})
}
},
完整代码
<template>
<section>
<div>
<Table border :data="tableData" :columns="columns" size="normal" @paste.native="pasteInfo($event)" @on-cell-click="showDetail"></Table>
</div>
</section>
</template>
<script>
export default {
name: "EditableSecurity",
data() {
return {
rowsInfo:[],
currentRowIndex: undefined,
currentColumnIndex: undefined,
temp:{},
emptyObj: { //需要复制粘贴的key值列
// name:undefined,
// age:undefined,
bir:undefined,
asg:undefined,
},
tableData:[
{
name:'xzz',
age:'18',
bir:'xs',
asg:'8888'
},
{
name:'xzz',
age:'18',
bir:'xs',
asg:'8888'
},
{
name:'xzz',
age:'18',
bir:'xs',
asg:'8888'
}
],
columns:[
{
key:'name',
align:'center'
},
{
key:'age',
align:'center'
},
{
key:'bir',
align:'center'
},
{
key:'asg',
align:'center'
}
],
}
},
methods: {
//复制粘贴事件
pasteInfo(e) {
try {
var data = null;
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
//复制过来的内容
data = clipboardData.getData("Text");
console.log(data)
//首先对源头进行解析
var rowStrArray = data.split("\n");//拆成很多行
console.log(rowStrArray,'rowStrArray')
this.rowsInfo = [];
for (var i = 0; i < rowStrArray.length-1; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split("\t");//按列拆分
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j]);
}
this.rowsInfo.push(row);
}
console.log(this.rowsInfo,'rowInfo')
for (var j = 0; j < this.rowsInfo.length; j++) {
console.log(this.currentRowIndex,'this.currentRowIndex')
if(this.currentRowIndex+j > this.tableData.length - 1){
break
}
this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))
console.log(this.temp,'temp')
let num = 0
let numFlag = 2 //限制从第几列开始粘贴(如果全部列都可以粘贴,就是从0列粘贴,numFlag=0)
for (var key in this.emptyObj) {
if (!this.rowsInfo[j][num]) {
break
}
if (this.currentColumnIndex <= numFlag) {
this.temp[key] = this.rowsInfo[j][num]
num = num + 1
}
numFlag = numFlag + 1
}
this.$set(this.tableData, this.currentRowIndex+j, this.temp)
}
// this.$emit('update:tableData', this.tableData)
} catch(err) {
this.$Message.error({
content: '请选择复制位置'
})
}
},
showDetail(row, column, data, event){
console.log(row,column)
this.currentRowIndex = row._index
this.currentColumnIndex = column._index
},
},
}
</script>
GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)