关于vue el-table 行数据拆分问题

Question

项目需要拆分table的一条行数据

然后单纯的用了splice的方法复制了一条数据

handleEdit(index, row) {
    this.tableData.splice(index,0,row)
},

结果拆分后的数据都是联动的，如上图123，无法逐条修改数据。
能力不够想不到用什么方法来解决这个问题？希望能够得到大佬点拨，非常感谢。
以下是data和布局代码

tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    person: '',
    num1: '0',
    num2: '0',
    msg: '',
    address: '上海市普陀区金沙江路 1518 弄'
}, {
    date: '2016-05-04',
    name: '王小虎',
    person: '',
    num1: '0',
    num2: '0',
    msg: '',
    address: '上海市普陀区金沙江路 1517 弄'
}, {
    date: '2016-05-01',
    name: '王小虎',
    person: '',
    num1: '0',
    num2: '0',
    msg: '',
    address: '上海市普陀区金沙江路 1519 弄'
}, {
    date: '2016-05-03',
    name: '王小虎',
    person: '',
    num1: '0',
    num2: '0',
    msg: '',
    address: '上海市普陀区金沙江路 1516 弄'
}],
options: [{
    value: '选项1',
    label: '黄金糕'
}, {
    value: '选项2',
    label: '双皮奶'
}, {
    value: '选项3',
    label: '蚵仔煎'
}, {
    value: '选项4',
    label: '龙须面'
}, {
    value: '选项5',
    label: '北京烤鸭'
}],

<el-table
        :data="tableData"
        highlight-current-row
        border
        fit
        stripe
        style="width: 100%">
    <el-table-column type="index" label="序号" width="70" align="center">
    </el-table-column>
    <el-table-column label="订单编号"  align="center">
        <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
        </template>
    </el-table-column>
    <el-table-column label="产品名称"  align="center">
        <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
        </template>
    </el-table-column>
    <el-table-column label="规格/型号/图号"  align="center">
        <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
        </template>
    </el-table-column>
    <el-table-column label="单位" width="80" align="center">
        <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
        </template>
    </el-table-column>
    <el-table-column label="排程数量" width="180" align="center">
        <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
        </template>
    </el-table-column>
    <el-table-column label="任务接收人" width="180" align="center">
        <template slot-scope="scope">
            <el-select v-model="scope.row.person" placeholder="请选择" clearable>
                <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="完成数量" width="180" align="center">
        <template slot-scope="scope">
            <el-input-number v-model="scope.row.num1" @change="handleChange" :min="0"
                             label="描述文字" size="small"></el-input-number>
        </template>
    </el-table-column>
    <el-table-column label="工时小计" width="180" align="center">
        <template slot-scope="scope">
            <el-input-number v-model="scope.row.num2" @change="handleChange" :min="0"
                             label="描述文字" size="small"></el-input-number>
        </template>
    </el-table-column>
    <el-table-column label="备注" width="180" align="center">
        <template slot-scope="scope">
            <el-input v-model="scope.row.msg" placeholder="请输入内容" clearable></el-input>
        </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">拆分
            </el-button>
            <el-button size="mini" type="danger" >删除
            </el-button>
        </template>
    </el-table-column>
</el-table>

Answer 1

会联动是因为Object是 引用类型 深拷贝一下切断引用即可

handleEdit(index, row) {
  this.tableData.splice(index, 0, JSON.parse(JSON.stringify(row)));
},

Answer 2

https://blog.csdn.net/weixin_...，我写的表格编辑，可希望对你有帮助。
其中：
单行复制方法可以解决你这个问题：
注意：这里是不能直接复制,比如 let obj = val,这样会把整条数据类型cope给obj，新增的数据变化，原有的数据也会发生变化。
原因：js 赋值运算符的浅拷贝，相当于使两个数组指针指向相同的地址，任一个数组元素发生改变，影响另一个。
解决方法：给新对象的属性赋值，然后push到绑定的数组中。

cope(val, index) {
      let obj = {
             title: val.title,
             text: val.text
          }
      this.tabledatas.push(obj)
   },