Vue+Element对于表格行的增加、插入、删除

需求：‘顺序增加行’

即在表格的最后一行再加一行

<div class="text-item">
<el-table
          :data="tableData"          
          stripe          
          style="width: 100%"          
          :header-cell-style="{ background: '#eef1f6' }"
          <el-table-column label="列1" width="190px">           
           <template v-slot="scope">             
            <el-select v-model="scope.row.l1" placeholder="请选择">               
             <el-option
               v-for="item in options"                  
               :key="item.value"                  
               :label="item.label"                  
               :value="item.value">
            </el-option>              
           </el-select>            
          </template>          
         </el-table-column>          
         <el-table-column label="列2">           
          <template v-slot="scope">             
           <el-input v-model="scope.row.l2" clearable>
           </el-input>            
          </template>          
         </el-table-column>          
         <el-table-column>          
           <template v-slot="scope">             
            <el-button                
            size="mini"                
            type="primary"                
            @click="addRow(scope.$index, tableData)">插入
            </el-button>              
            <el-button                
            size="mini"                
            type="danger"                
            @click="removeRow(scope.$index, tableData)">删除
            </el-button>            
           </template>         
          </el-table-column>        
        </el-table>        
        <div style="width: 100%;text-align:center; margin:10px 0 0 0">
         <el-button            
         type="primary"            
         @click="addRowa(tableData)"            
         style="float:left">增加行
         </el-button>
	</div>      
      </div>

表格數據

tableData = [
    {
          l1: "DLX",      
          l2: 0  },    
    {     
    	  l1: "DLX",      
    	  l2: 9560   
    }    
    	    ];

l1下拉框的選項

options = [
    { value: "DLX", label: "DLX" },    
    { value: "XLCen1", label: "XLCen1" },    
    { value: "XLCen2", label: "XLCen2" }  
    	  ];

点击事件

addRowa(tableData: any[]) {
    tableData.push({
     l1: "", l2: ""
     });  
     }  
     // 插入行
  addRow(index: number, tableData: any[]) {
      tableData.splice(index + 1, 0, {
     l1: "", l2: ""
     });  
     }  
     // 删除当前行
  removeRow(index: number, tableData: any[]) {
      tableData.splice(index, 1); 
       }

完成！