表格 第三方批量复制内容粘贴

需求：

首先，从excel表格中或是.txt文档中复制文字或oe号粘贴到input框里，然后根据换行符把粘贴内容填充到input框里，同时调接口获取名称和价格展示出来。

环境：

vue+vue-cli+iview

效果：

未复制粘贴时 粘贴内容后

代码：

<template>
  <div>
    <table>
      <thead></thead>
      <tbody>
       <tr v-for="(product,productIndex) in productList" :index="productIndex">
        <td>
          <input
            type="text" autocomplete="off"
            class="oeInput1"
            placeholder="请输入oe"
            v-model="product.inputVal"
            @paste="onPasteDone($event)">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  const EMPTY_LINE = {
    inputVal: ''
  }

export default{
  data(){
    return{
      productList: [
          Object.assign({}, EMPTY_LINE) // 默认表格中只显示一行
        ]
    }
},
methods:{
  onPasteDone(e){
        let _this = this;
        if (!(e && e.clipboardData)) {
          e = window.event;
        }
        // 添加到事件对象中的访问系统剪贴板的接口
        let clipboardData = e.clipboardData,
          items,
          item;
       
        if (clipboardData) {
          items = clipboardData.items;
          if (!items) {
            return;
          }
          item = items[0];
          if (item && item.kind === "string") {
            //str是你当前粘贴到input框里的所有搜索内容
            item.getAsString(function (str) {
              let content = str.split(/[\n]/); //以换行符来切割
              for (let kk in content) {
                let val = content[kk];
                if ($.trim(val).length == 0) {
                  continue;
                }
                //替换粘贴时的第一行
                var res = val.replace(/[\r\n]/g,""); 
                var product ={
                  inputVal:res
                };
               //confirmCurrentOe是调的后台接口来获取标准名称和价格
                _this.confirmCurrentOe(product);
              }
              _this.productList.splice(0)
            })
          }
        }
        return true;
      }
  }
}
</script>