Vue，如何克隆现有选定行旁边的行？

Question

有一组数据列表，试图克隆该行，但不知道如何使新行显示在下一个选定行上。

HTML：

<table id="result_table_2" >
<thead>
    <th>#</th>
    <th>Name</th>
    <th>Code</th>
    <th></th>
</thead>
<tbody>
    <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>
</tbody>
</table>

Vue 内部

<script type="text/javascript">

    let app = new Vue({
        el: '#app',
        data(){
            return {
            
                dataList:[
                    {name:'James',code:4},
                    {name:'Katy',code:7},
                    {name:'Jim',code:2},
                ],
                addnew:{
                    name:'test',
                    code:8,
                },
            }           
        },
        
            addnewRcd(rcd, index){
                let record = _.clone(this.addnew);
                this.dataList.push(record);
        },
    });
</script>

尝试将新行添加到我单击的行旁边。

Answer 1

您可以简单地通过使用

Array.splice()

方法在单击的行之后立即插入行来实现这一点。

现场演示：

new Vue({
  el: '#app',
  data(){
    return {

      dataList:[
        {name:'James',code:4},
        {name:'Katy',code:7},
        {name:'Jim',code:2},
      ],
      addnew:{
        name:'test',
        code:8,
      },
    }           
  },
  methods: {
    addnewRcd(rcd, index) {
      this.dataList.splice(index+1, 0, rcd);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <th>#</th>
      <th>Name</th>
      <th>Code</th>
      <th></th>
    </thead>
    <tbody>
      <tr v-for ="(list,index) in dataList">
        <td>{{index+1}}<td>
        <td>{{list.name}}<td>
        <td>{{list.code}}<td>
        <td>
          <button v-on:click="addnewRcd(list,index)">
            Clone
          </button>
        <td>
      </tr>
    </tbody>
  </table>
</div>