vue.set/this.$set

vue项目中,几个表格分开展示,但是展示的内容都一样(不展示的内容有区别),为了省事儿,就给封装了个子组件,但是在父组件中更新数据之后,没有触发视图的更新,使用以下代码解决:

this.savedData.visitorVoList.forEach((item,index) => {
  this.$set(this.formData.visitorVoList, index, item)  //this.formData.visitorVoList是父组件的数组数据
})

用this.$set可以触发视图更新

还有个功能是可以导入文件,用导入后的内容替换当前表格的内容.导入文件的数组长度比当前表格的数组长度大还好说,可以直接用上面的方法;但是当导入的数组长度比当前表格的数组长度小时,用上面的方法只能更新导入数据数组长度的数据,其他数据不更新也删除不了.可以使用splice()方法先清空表格数据再赋值.
arr.splice(index,1)splice已经被vue处理过了，可以双向绑定

  this.formData.visitorOtherVoList.splice(0, 100)  //用this.formData.visitorOtherVoList = [] 不好使
  if(res.data.visitorOtherVoList.length > 0) {
    res.data.visitorOtherVoList.forEach((item,index) => {
      this.$set(this.formData.visitorOtherVoList, index, item)
    })
  }else {
    this.$set(this.formData.visitorOtherVoList, 0, emptyData)
  }

这样就可以啦