vue中表格批量导入数据，新增时表格增加一行并保存

1、效果图如下，2至4条是批量导入的数据，第一条是新增数据

 

 2、表格代码如下，用scope.row.edit控制是否显示新增的输入框

<el-table
      class="mt-10"
     :data="invoiceOpt.invoicenoRegisterList"
     stripe
     border
     >
     <el-table-column type="index" label="序号" min-width="50"></el-table-column>
     <el-table-column label="发票号" prop="invoicedNo" min-width="120">
       <template slot-scope="scope">
         <span v-if="scope.row.edit"><el-input v-model="scope.row.invoicedNo"></el-input></span>
         <span v-else>{{scope.row.invoicedNo}}</span>
       </template>
     </el-table-column>
     <el-table-column label="发票金额(元)" prop="invoiceAmount" min-width="120" align="right">
       <template slot-scope="scope">
         <span v-if="scope.row.edit"><el-input v-model="scope.row.invoiceAmount"></el-input></span>
         <span v-else>{{scope.row.invoiceAmount}}</span>
       </template>
     </el-table-column>
     <el-table-column label="税率" prop="" min-width="60">
       <template slot-scope="scope">
         <span v-if="scope.row.edit"><el-input v-model="scope.row.taxRate"></el-input></span>
         <span v-else>{{scope.row.taxRate}}</span>
       </template>
     </el-table-column>
     <el-table-column label="附件名称" prop="invoiceFilename" min-width="120">
       <template slot-scope="scope">
         <span v-if="scope.row.edit"><el-input v-model="scope.row.invoiceFilename"></el-input></span>
         <span v-else>{{scope.row.invoiceFilename}}</span>
       </template>
     </el-table-column>
     <el-table-column label="操作" min-width="90">
       <template slot-scope="scope">
           <el-button type="text" style="width: 30px;" class="tb-btn" size="small" @click="handleDelRow(scope)">删除</el-button>
           <el-button v-if="scope.row.edit" type="text" style="width: 30px;" class="tb-btn" size="small" @click="handleSaveRow(scope)">保存</el-button>
       </template>
     </el-table-column>
     </el-table>

3、在methods里面写新增，保存，删除方法

//新增方法
add(){
      var list = {
                invoiceAmount:'',
                invoiceFilename: '',
                invoicedNo:'',
                taxRate:'',
                edit:true
         		 };
      this.invoiceOpt.invoicenoRegisterList.unshift(list)//往数组前面新增
    },
    //保存
    handleSaveRow(scope){
      scope.row.edit=false;
    },
    ///删除
    handleDelRow(scope){
      this.$confirm('确定删除吗', '提示').then(() => {
        this.invoiceOpt.invoicenoRegisterList.splice(scope.$index,1);
      })
    },

 4、批量导入得到的数组arr,需要把新增和批量导入的数组合并为一个数组，并且返回新的长度

this.invoiceOpt.invoicenoRegisterList.push.apply(this.invoiceOpt.invoicenoRegisterList,arr)