表格数据联动删除问题

1. 描述
表格中的数据联动删除指：表格中的数据来源于两类，第一类可以自己手动添加数据进入表格。第二类数据来自另外一个数据仓库，此类数据会随着数据仓库中的数据动态改变表格中的数据，即表格中除了手动添加的数据之外，来自第二类的数据要随着数据仓库中的数据动态更新。

2. 解析
解决此类问题要考虑以下几个问题

表格中手动添加的数据不受数据仓库中的数据变化而影响。
当数据仓库的数据发生变更时，将数据仓库中的数据与表格中的数据对比：

（1）当表格中已有数据仓库中的数据记录时，将表格中对应的数据记录替换为数据仓库中最新的已有记录。
（2）当表格中没有数据仓库中的数据记录时，将表格中没有的数据记录塞进表格中。
（3）当表格中已有的数据但是数据仓库中却没有，就将表格中对应的数据删除（注意：要删除的数据不能是手动添加的数据）

3. 实现思路

将newArray与oldArray数据进行比较，对于oldArray来说，newArray中没有oldArray的数据部分即要从tableData删除的数据。
将newArray与oldArray数据进行比较，newArray与oldArray相同部分的数据即要在tableData中更新的数据。
将newArray与oldArray数据进行比较，对于newArray来说，oldArray中没有newArray的数据部分即要从tableData新添的数据。

4. 实现代码
对于上一次更新的数据可以放到全局变量缓存起来，这边也可以利用vue的watch监听属性，其中有两个参数，第一个为newArray,第二个为oldArray。

watch:{
    newArray:function (newArray,oldArray){
    //   因为第一次执行oldArray为空值，所以当oldArray=null时需要将newArray赋值给oldArray
    if(oldArray==null){
        oldArray=newArray
    }
    // 当newArray为null时oldArray不为空时，newArray中没有oldArray的数据为oldArray中所有元素，然后将这些元素从tableData中删除，此处为特例先进行处理。
    if(newArray==null){
     if(oldArray!==null){
         for(let i=0;i<oldArray.length;i++){
             for(let j=0;j<this.tableData.length;j++){
                 if(this.tableData[j].id==oldArray[i].id){
                     this.tableData.splice(j,1)
                 }
             }
         }
     }
     return
    }
    // 当newArray不为空时，找出更新数据后需要删除的数据，即oldArray中有的而newArray中没有的数据
    var deleteData=[]
    var tag=false
    for(let i=0;i<oldArray.length;i++){
        tag=false
        for(let j=0;j<newArray.length;j++){
            if(oldArray[i].id==newArray[j].id){
                tag=true
                break
            }
        }
        if(tag==false){
            deleteData.push(oldArray[i])
        }
    }
    // 拿到要删除的数据后，将tableData中对应要删除的数据删除掉
    for(let i=0;i<deleteData.length;i++){
        for(let j=0;j<this.tableData.length;j++){
            if(deleteData[i].id==this.tableData[j].id){
                this.tableData.splice(j,1)
            }
        }
    }
    //找出newArray与oldArray公共部分的数据即tableData中要更新的数据
    var sameData=[]
    for(let i=0;i<newArray.length;i++){
        for(let j=0;j<oldArray.length;j++){
            if(oldArray[j].id==newArray[i].id){
                sameData.push(newArray[i])
                break
            }
        }
    }
    // 获取newArray与oldArray公共部分的数据即tableData中要更新的数据
    for(let i=0;i<sameData.length;i++){
        for(let j=0;j<this.tableData.length;j++){
            if(sameData[i].id==this.tableData[j].id){
                this.tableData[j]=sameData[i]
                break
            }
        }
    }
    //找出newArray中oldArray没有的数据即要添加到tableData中的数据
    var addData=[]
    var tag1=true
    for(let i=0;i<newArray.length;i++) {
        tag1=true
        for(let j=0;j<oldArray.length;j++){
           if(oldArray[j].id==newArray[i].id){
             tag1=false
             break
           }
        }
        if(tag1==true){
            addData.push(newArray[i])
        }
    }
    // 获取到的addData的数据即要添加到tableData中的数据
    this.tableData.concat(addData)
    }
}

拓展：另外筛选出要删除的数据并将表格中要删除的数据删除后，后续的筛选newArray与oldArray相同的数据更新到tableData中和筛选出oldArray中没有的newArray的数据添加到tableData中的操作等价于：把newArray中的所有数据存放到删除数据后的tableData中，其中分两类数据，第一类要更新到tableData中的数据，第二类要添加到tableData中的数据。此时只需要将newArray与删除数据后的tableData进行比较，当两者都有的数据，则将这些数据更新到tableData中。当tableData中没有newArray的数据，则将这些数据添加到tableData中。
实现代码如下：

var tag1=false
var temptableData=[]
for(let i=0;i<newArray.length;i++){
    tag1=false
for(let j=0;j<this.tableData.length;j++){
    if(newArray[i].id==this.tableData[j].id){
        this.tableData[j]=newArray[i]
        tag1=true
        break
    }
}
if(tag1==false){
    temptableData.push(newArray[i])
}
}
this.tableData.concat(temptableData)

5. 总结
此类联动删除的问题可以转化为数学中的交集补集的思想来处理，此外需要将动态变更的数据仓库中的上一次数据保存起来，这里可以利用vue的watch属性的newvalue和oldvalue来处理，没有用watch属性则可以将历史数据放入到全局变量或者缓存中。

表格数据联动删除