vue table 常见的坑

坑一 数据改变没效果

例如element很多时候我们我们会直接table当前行的数据直接修改 弹窗dialog修改数据 vue是MVVM框架

由于 JavaScript 的限制， Vue 不能检测以下变动的数组： * 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

所以我们想改变table中第一条数据的值，通过this.list[0]=newValue这样是不会生效的

       解决方案： 
       // Array.prototype.splice`
       example1.items.splice(indexOfItem, 1, newValue)

       //添加数据
      this.list.unshift(this.temp)
      
      //删除数据
      const index=this.list.indexOf(row)//找到要删除数据在list中的位置
      this.list.splice(index,1)//通过splice 删除数据
      //修改数据
      
      const index=this.list.indexOf(row)//找到要删除数据在list中的位置
      this.list.splice(index,1,this.updateData)//通过splice 修改数据
      

坑二

我们在dialog里面改变状态的时候，遮罩下面的table里面该行的状态也在那里跟着一只变化着。原因想必大家都猜到了。赋值的数据是一个objec引用类型共享一个内存区域的。所以我们就不能直接连等复制，需要重新指向一个新的引用

方案如下:

//赋值对象是一个obj 
this.objData=Object.assign({}, row) //这样就不会共用同一个对象 
//数组我们也有一个巧妙的防范 
newArray = oldArray.slice(); //slice会clone返回一个新数组