iveiw Table 组件在数据变更后，视图不改变

太过爱你忘了你带给我的痛 2023-07-23 05:58 8阅读 0赞

#### 问题描述 ####

![在这里插入图片描述][20200407125856689.png]  
如上图，我想通过操作右边的按钮来操作表格里的数据（上移，下移，删除）。上移和下移的代码如下：

moveUp (index) { 
          console.log(index)
          if (index === 0) { 
            return true
          }
          const temObj = this.data1
          const tem = temObj[index - 1]
          temObj[index - 1] = temObj[index]
          temObj[index] = tem
        },
        moveDown (index) { 
          const temObj = this.data1
          if (index === temObj.length - 1) { 
            return true
          }
          const tem = temObj[index + 1]
          temObj[index + 1] = temObj[index]
          temObj[index] = tem
        }

可是结果发现，当单击上移和下移的按钮后，数据的顺序变了，但是视图没有变动。

#### 解决办法 ####

变更顺序后，增加`this.data1.splice(0, 0)`，这样一个操作。  
变更后代码如下：

moveUp (index) { 
          console.log(index)
          if (index === 0) { 
            return true
          }
          const temObj = this.data1
          const tem = temObj[index - 1]
          temObj[index - 1] = temObj[index]
          temObj[index] = tem
          this.data1.splice(0, 0)
        },
        moveDown (index) { 
          const temObj = this.data1
          if (index === temObj.length - 1) { 
            return true
          }
          const tem = temObj[index + 1]
          temObj[index + 1] = temObj[index]
          temObj[index] = tem
          this.data1.splice(0, 0)
        }

> 先到这里了，希望疫情早点过去

[20200407125856689.png]: /images/20230528/e58ffe0f7d054867a6c0f98b1d4882e8.png