Vue开发：如何在选中行的紧邻位置克隆并插入新行？

你当前用push()方法会把新记录追加到数组末尾，要实现插入到选中行的紧邻下方，只需改用数组的splice()方法即可。

修改addnewRcd方法 #

替换原有的push逻辑，使用splice指定插入位置为index + 1（数组索引从0开始，选中行的索引是index，下一行对应的插入位置就是index + 1）：

addnewRcd(rcd, index){
    let record = _.clone(this.addnew);
    // 插入到选中行的下一行
    this.dataList.splice(index + 1, 0, record);
}

修正HTML标签问题 #

注意你提供的HTML代码中所有<td>标签都未正确闭合，这可能导致表格渲染异常，修正后的表格行代码如下：

<tr v-for="(list,index) in dataList">
    <td>{{index+1}}</td>
    <td>{{list.name}}</td>
    <td>{{list.code}}</td>
    <td>
        <i class="icon-plus-sign" style="cursor: pointer;" v-on:click="addnewRcd(list,index)"></i>
    </td>
</tr>

完成以上修改后，点击加号按钮时，新行就会插入到当前点击行的正下方。

内容的提问来源于stack exchange，提问作者Eugene Kong