Vue2中如何用this.$set为Element-UI el-table批量添加响应式数组元素

不用循环，也不用纠结this.$set的逐个调用，Vue本身已经对数组的常用操作做了响应式封装，直接用下面几种方法就能批量添加数据并触发el-table更新：

• 方法1：push结合扩展运算符批量追加
  直接把新数组的所有元素一次性push进原数组，Vue会自动触发响应式更新：

  const newDatas = [{c: 3}, {d: 4}]
  this.datas.push(...newDatas)
  

• 方法2：splice批量插入（支持指定位置）
  如果需要在数组中间某个位置插入新数据，用splice更灵活，末尾插入的话就用数组长度作为起始索引：

  const newDatas = [{c: 3}, {d: 4}]
  // splice(起始位置, 删除元素数量, ...要添加的元素)
  this.datas.splice(this.datas.length, 0, ...newDatas)
  

• 方法3：直接替换数组（最简单的方式）
  用扩展运算符合并原数组和新数组，生成新数组后直接赋值，Vue会检测到数组引用变化并更新视图：

  const newDatas = [{c: 3}, {d: 4}]
  this.datas = [...this.datas, ...newDatas]
  

补充说明 #

this.$set一般是用来修改数组指定索引位置的元素（比如this.$set(this.datas, 0, {a: 100})）或者给对象添加新属性时用的，批量添加数组元素完全没必要逐个调用它，用上面的原生数组方法就行，Element-UI的el-table会自动同步更新数据展示。

内容的提问来源于stack exchange，提问作者Brian Tzu-Pin Ho