elementui表格中复制粘贴上传校验文本

1、使用复制粘贴上传校验文本

• 需要复制粘贴区域
• 添加paste粘贴事件
• 校验文本是否正确

1. 复制粘贴区域

<template>
    <div class="common-container" ref="paste-container">
         <div class="copywriting-area">
             <el-form>
                <el-table
                  :data="tableData"
                  size="medium"
                  fit
                  height="550"
                >
                  <el-table-column
                    v-for="col in tableColumns"
                    :prop="col.columnName"
                    :key="col.columnName"
                  >
                    <template slot="header">
                      <span>{{ col.comments }}</span>
                    </template>
                    <template slot-scope="scope">
                      <span>
                        {{ scope.row[col.columnName] }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
         </div>
    </div>
</temlate>
<script>
export default {
  data() {
    return {
        tableColumns: [
          { columnName: 'indId', comments: '指标ID' },
          {
            columnName: 'indName',
            comments: '指标名称',
          },
          {
            columnName: 'indCode',
            comments: '指标代码',
          },
        ],
        tableData: [],
    }
  }
}
</script>

2. 添加paste粘贴事件

<script>
export default {
  mounted() {
    // 监听 ctrl+v键盘事件
    this.$refs['paste-container'].addEventListener('paste', event => {
      let text = (event.clipboardData || window.clipboardData).getData('text')
      this.initTable(text)
    })
  },
}
</script>

3. 校验文本是否正确

<script>
export default {
  methods: {
    /**
     * 数据复制初始化
     * @param {*} text
     * @returns
     */
    initTable(text) {
      if (text) {
        let rows = text
          .split(/(\r\n)|(\n)/)
          .filter(
            item => item !== undefined && item !== '\n' && item !== '\r\n'
          )
        if (rows[0].split('\t').length !== this.tableColumns.length) {
          this.$message.warning('字段数量不一致，请检查后复制')
          this.tableData = []
          return
        }
        for (let item of rows) {
          let r = {}
          //去除掉最后可能出现的空行
          if (!item) {
            continue
          }
          let cols = item.split('\t')
          for (let j = 0; j < cols.length; j++) {
            r[this.tableColumns[j].columnName] = cols[j]
          }
          this.tableData.push(r)
        }
      } else {
        this.$message.warning('您没有复制内容')
      }
    },
  }
}
</script>