Vue form copy and paste
Renderings:
Description: I want to paste the content on the vue page after copying the content from the excel table. There are two cases:
(1) All columns can be pasted : No matter which column is clicked to start pasting, the pasting starts from the clicked column. The effect is as shown in Figure 1 above
(2) Only the specified columns can be pasted : click which column to start pasting, and paste from this column, if the column clicked is not a column that can be pasted, then it will also start pasting from the column that can be pasted (only the front column of the column that can be pasted can be clicked You can paste it, click the back column and you can’t paste it) The effect is as shown in Figure 2 above
Note: If multiple columns need to be pasted, then these columns must be adjacent columns . For example: columns=[name, key, age], then you can’t just paste {name, age}, and there can’t be skipped columns in the middle .
Implementation process:
1. Normal – all columns can be pasted
（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. If only two columns are pasted
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. If only one column is pasted
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
},
-----------------------------------------------Extensions-- --------------------------------------------
The above is ordinary pasting. If you need to modify the pasted content during the pasting process, for example: the dictionary value corresponding to the select selection box is often encountered. You can’t just display the dictionary code, you need to convert it into the corresponding Chinese character.
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: '请选择复制位置'
})
}
},
full code
<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>