vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table-CSDN博客

  • 阿里云国际版折扣https://www.yundadi.com

  • 阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

    1、效果图

    可以全部复制粘贴也可以单独对某行、某列进行复制粘贴

    从excel复制粘贴到前端页面的table上

    2、实现代码

    html部分

    <template>
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :cell-class-name="getCellIndex"
          @paste.native="pasteInfo($event)"
          @cell-click="cellClick">
          <el-table-column prop="date" align="center" label="日期" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.date" placeholder="单行输入" clearable />
            </template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="姓名" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="单行输入" clearable />
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="地址">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" placeholder="单行输入" clearable />
            </template>
          </el-table-column>
    
          <el-table-column prop="jg" align="center" label="籍贯"></el-table-column>
          <el-table-column prop="gz" align="center" label="工作"></el-table-column>
          <el-table-column prop="xz" align="center" label="薪资"></el-table-column>
    
          <el-table-column prop="age" align="center" label="年龄">
            <template slot-scope="scope">
              <el-input v-model="scope.row.age" placeholder="单行输入" clearable />
            </template>
          </el-table-column>
          <el-table-column prop="sex" align="center" label="性别">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sex" placeholder="单行输入" clearable />
            </template>
          </el-table-column>
          <el-table-column prop="tel" align="center" label="电话">
            <template slot-scope="scope">
              <el-input v-model="scope.row.tel" placeholder="单行输入" clearable />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    

    js部分

    <script>
    export default {
      name: 'testDemo',
      data() {
        return {
          tableData: [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              jg: '北京',
              gz: '学生',
              xz: '0',
              age: 18,
              sex: '女',
              tel: '13112345678',
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              jg: '上海',
              gz: '销售',
              xz: '10000',
              age: 19,
              sex: '男',
              tel: '13112345678',
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              jg: '上海',
              gz: '行政',
              xz: '5000',
              age: 31,
              sex: '男',
              tel: '13112345678',
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
              jg: '江苏',
              gz: '做生意',
              xz: '50000+',
              age: 48,
              sex: '男',
              tel: '13112345678',
            }
          ],
          rowIndex: undefined,
          columnIndex: undefined,
        }
      },
      methods: {
        /** 设置行、列索引 */
        getCellIndex: function ({ row, column, rowIndex, columnIndex }) {
          row.index = rowIndex;
          column.index = columnIndex;
        },
        /** 点击单元格 */
        cellClick(row, column, cell, event) {
          // console.log(row, column, cell, event);
          this.rowIndex = row.index
          this.columnIndex = column.index
        },
        /** 复制粘贴 */
        pasteInfo(e) {
          try {
            e.preventDefault(); //阻止默认粘贴事件
            e.stopPropagation(); //阻止事件冒泡
    
            var data = null;
            var clipboardData = e.clipboardData || window.clipboardData; // IE
            if (!clipboardData) {
              //chrome
              clipboardData = e.originalEvent.clipboardData;
            }
            data = clipboardData.getData("Text"); //复制过来的内容
            //首先对源头进行解析
            var rowStrArray = data.split("\r\n"); //拆成多行
            let rows = [];
            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]);
              }
              rows.push(row);
            }
            // console.log(rows,'---------rows')
    
            let emptyObj = { //需要复制粘贴的key值列
              date: undefined,
              name: undefined,
              address: undefined,
              jg: undefined,
              gz: undefined,
              xz: undefined,
              age: undefined,
              sex: undefined,
              tel: undefined,
            }
            for (var j = 0; j < rows.length; j++) {
              if(this.rowIndex+j > this.tableData.length - 1){
                break
              }
              let item = {}
              item = JSON.parse(JSON.stringify(this.tableData[this.rowIndex+j]))
              let num = 0
              let numFlag = 0 //从哪一列开始粘贴全部列都可以粘贴(即从第0列可以粘贴)
              for (var key in emptyObj) {
                if (!rows[j][num]) {
                  break
                }
                // console.log('numFlag--', numFlag, 'this.columnIndex--', this.columnIndex, 'num-', num);
                if (this.columnIndex <= numFlag) {
                  // 针对不能修改的列字段做处理可以复制粘贴的列才做赋值。根据需求加下面的if判断
                  if (key !== 'jg' && key !== 'gz' && key !== 'xz') {
                    item[key] = rows[j][num]
                  }
                  num = num + 1
                }
                numFlag = numFlag + 1
              }
              this.$set(this.tableData, this.rowIndex+j, item)
            }
          } catch(err) {
            this.$message.error('请选择粘贴位置')
          }
        },
      }
    }
    </script>
    
  • 阿里云国际版折扣https://www.yundadi.com

  • 阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
    标签: vue