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>