iview table组件动态新增行并插入input

1、HTML部分

<Button type="primary" ghost @click="addRow()" style="margin: 10px 0px;">增加</Button>
<Table border :columns="rulesTableColumns" :data="rulesTableData" >
   <template slot-scope="{ row }" slot="ranking" ref="row">
       <div class="service table_slot">
           <Input v-model="row.ranking" @input="onInputText($event)" @on-focus="focusInput(row,'ranking')" placeholder="请输入" :maxlength="10" :show-word-limit="true" clearable  />
       </div>
    </template>
    <template slot-scope="{ row }" slot="standard" ref="row">
       <div class="service table_slot">
            <Input v-model="row.standard"  @input="onInputText($event)" @on-focus="focusInput(row,'standard')" placeholder="请输入" :maxlength="10" :show-word-limit="true" clearable  />
        </div>
     </template>
</Table>

2、js部分

addRow(){
    // 给table添加一行空数据
   this.rulesTableData.push({
      ranking:"",
      standard:""
   })
},
onInputText(e,index){
    // 监听指定行、指定列里input的值
   let zhList = this.rulesTableData;
   let indexs = ''
   zhList.map((item,index)=>{
       if(item.id == this.focusItem.id){
         indexs = index;
       }
   })
   this.rulesTableData[indexs][this.focusParam]=e;
},
focusInput(e,param){
   this.focusItem = e;
   this.focusParam = param;
},

效果图：